---
map:
    path: /components/group-form
---

# GroupForm

<alias to="GroupForm,Grid,GridItem,Dom"></alias>

## 特殊类型，type=group

<demo src="./demo/group.vue"
title="group组"
desc="多个表单项组合，分组渲染">
</demo>


## group分组的表单校验

<demo src="./demo/validate.vue"
title="group分组的表单校验"
desc="多个表单项组合，分组渲染，校验">
</demo>

## group的显示控制

<demo src="./demo/groupShow.vue"
title="show"
desc="通过配置show函数进行逻辑控制，可以通过内置提供的方法拿到数值进行判断">
</demo>

## children的slot

比如一个输入框的组件 diy-input

```vue
<template>
  <input type="text" v-model="value" @change="changeHandler" placeholder="自定义的输入框">
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
})
const emits = defineEmits(['update:modelValue', 'change'])
const value = computed({
  get () {
    return props.modelValue
  },
  set (val) {
    emits('update:modelValue', val)
    emits('change', val)
  },
})

function changeHandler (event) {
  emits('change', event)
}
</script>

<style lang="scss" scoped>
input {
  border: 1px solid #ddd;

  &.is-error {
    border: 1px solid red;
  }
}
</style>
```

<demo src="./demo/slot.vue"
title="children的slot"
desc="children建议通过组件方式，修改prefix+type实现，或传入component实现">
</demo>

<API src="./src/index.vue" lang="zh"></API>