# CommonForm 简单表单


### 基础用法

:::demo

```vue
<template>
  <div class="form-demo">
    <el-row :gutter="20">
      <el-col :span="24">
        <common-form :form-values="formValues" :forms="forms1"></common-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// input/textarea/select/input-num/radio/cascader/switch/check-group
const forms1 = ref<any>([
  { label: '姓名', name: 'name', type: 'input', value: '' },
  { label: '年龄', name: 'age', type: 'input-num', value: '' },
  {
    label: '性别',
    name: 'sex',
    type: 'select',
    value: 'man',
    attrs: {
      options: [
        { label: '男', value: 'man' },
        { label: '女', value: 'woman' }
      ]
    }
  },
  {
    label: '爱好',
    name: 'like',
    type: 'cascader',
    attrs: {
      options: [
        {
          value: 'guide',
          label: 'Guide',
          children: [{ value: 'guide', label: 'Guide' }]
        }
      ]
    }
  },
  {
    label: '婚否',
    name: 'marray',
    type: 'switch',
    value: true,
    attrs: {
      'active-text': '是',
      'inactive-text': '否'
    }
  },
  {
    label: '学历',
    name: 'record',
    type: 'radio-group',
    attrs: {
      options: [
        { label: '小学', value: '1' },
        { label: '初中', value: '2' },
        { label: '高中', value: '3' },
        { label: '大学', value: '4' },
        { label: '研究生', value: '5' }
      ]
    }
  },
  {
    label: '兴趣',
    name: 'xq',
    type: 'check-group',
    attrs: {
      options: [
        { label: '篮球', value: '1' },
        { label: '足球', value: '2' },
        { label: '乒乓球', value: '3' },
        { label: '羽毛球', value: '4' }
      ]
    }
  },
  { label: '出生年月', name: 'birthday', type: 'date-picker' },
  { label: '描述', name: 'desc', type: 'textarea' }
]);

const formValues = ref<any>({
  name: '',
  age: '',
  sex: 'man',
  like: '',
  marray: '',
  record: '',
  xq: [],
  birthday: '',
  desc: ''
});
</script>

</script>


```

:::

### 配置参数

| 参数                | 说明              | 类型             | 是否必须 |
| :----------------------- | :-------------- | :--------------- | :------- |
|forms| form表单项，支持各种表单元素的简单结合 |Array[]|true|
| ---- label  | 表单元素中文显示 | String | true |
| ---- value  | 表单元素v-model绑定值 | String Array, Boolean | true |
| ---- type   | 目前暂时支持的表单元素类型有： input/textarea/select/input-num/radio/cascader/switch/checkbox/check-group/date-picker | String | true |
| ---- attrs  | 表单元素v-bind属性，支持原本element-plus中表单元素属性，另外对部分表单元素进行封装，支持自定义属性传递。下面有单独对自定义封装表单元素进行讲解 | Obkect | false |
|form-values| form表单对应forms的对象，以key，value形式 |Object[]|true|

###  原始参数支持: 
#### select扩展参数
支持以v-bind 的形式传入对象，实现原始el-select所有属性，方法等的支持，如下例所示：

:::demo
```vue

<template>
  <common-select 
    v-bind="selectAttrabute" 
    :options="options" 
    :propsMap="propsMap" 
    v-model="selectValue"
    @change="changeEvent"
    ></common-select>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const selectValue = ref('');

const selectAttrabute = ref({
  disabled: true,
  multiple: true,
  disabled: false,
  'collapse-tags-tooltip': true,
  effect:'light'
})
const options = ref([
  {name: '选项1', id:'option1'},
  {name: '选项2', id:'option2'},
  {name: '选项3', id:'option3'},
])


const propsMap = ref({
  label:'name',
  value:'id'
})

// change事件
function changeEvent(value) {
  proxy.$message(`当前选项${value} `)
}

</script>

```

:::
| 参数                | 说明              | 类型             | 是否必须 |
| :----------------------- | :-------------- | :--------------- | :------- |
|options| form表单项，支持各种表单元素的简单结合 |Array[]|true|
| ---- label  | 表单元素中文显示 | String | true |
| ---- value  | 表单元素v-model绑定值 | String Array, Boolean | true |
|propsMap  | label,value的映射对象，可以通过该属性与label，value进行映射，从而不限制实际使用时options中正常应该显示的文字及选中后回传的value值 | Object | false |



#### checkBoxGroup字段

:::demo
```vue

<template>
  <common-check-group
    :options="options" 
    :isCheckAll="true" 
    v-model="selectValue"
    @change="changeEvent"
    ></common-check-group>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const selectValue = ref([]);


const options = ref([
  {label: '选项1', value:'option1'},
  {label: '选项2', value:'option2'},
  {label: '选项3', value:'option3'},
])


// change事件
function changeEvent(value) {
  proxy.$message(`当前选项${value} `)
}

</script>

```

:::

| 参数                | 说明              | 类型             | 是否必须 |
| :----------------------- | :-------------- | :--------------- | :------- |
|options| form表单项，支持各种表单元素的简单结合 |Array[]|true|
| ---- label  | 表单元素中文显示 | String | true |
| ---- value  | 表单元素v-model绑定值 | String Array, Boolean | true |
|isCheckAll  | 是否展示全选/全不选 的checkbox | Boolean | false |
|checkAllLabel  | 如果isCheckAll为true时，展示的全选/全不选的文字 | String | false |



#### CommonRadioGroup组件

:::demo
```vue

<template>
  <common-radio-group
    v-model="radio"
    :options="options"
  ></common-radio-group>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const radio = ref('');


const options = ref([
  {label: '选项1', value:'option1'},
  {label: '选项2', value:'option2'},
  {label: '选项3', value:'option3'},
])


// change事件
function changeEvent(value) {
  proxy.$message(`当前选项${value} `)
}


```
:::