## Form表单
介绍Form表单的使用

#### 典型表单
包括各种表单项，比如输入框、选择器、开关、单选框、多选框等
:::demo
``` html
<template>
  <mg-form :config="options" label-width="'100px'" :form="form" ref="form" label-position="left" :status-icon="true" ></mg-form>
  <div class='px20 uni-center'>
    <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </div>
</template>
<script>
import pop from './component/pop.vue'
export default {
  data () {
    const region = [{ label: '浙江', value: 1 },{ label: '上海', value: 2 }]
    const type = [{ label: '美食/餐厅线上活动', value: 1 },{ label: '地推活动', value: 2 },{ label: '线下主题活动', value: 3 },{ label: '单纯品牌曝光', value: 4 }]
    const resource = [{ label: '线上品牌商赞助', value: 1 },{ label: '线下场地免费', value: 2 },{ label: '线下场地免费', value: 3 },{ label: '线下场地免费', value: 4 },{ label: '线下场地免费', value: 5 },{ label: '线下场地免费', value: 6 }]
    const cascader =[{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }]
    return {
      form:{
        cascader:[]
      },
      options: [
        {
          label: '活动名称',
          prop: 'name',
          required: true,
                //  hide: true,
          type: 'input',
          span: 24,
          attrs: {
            maxlength: 20,
            'show-word-limit': true
          }
        },
        {
          label: '活动区域',
          prop: 'region',
          required: true,
          type: 'select',
          span: 24,
              enum:'',
          options:region,
          apiList:[
            {
              apiId: 9,
              blurType: 1,
              param: "[]",
              parameterName: "",
              response: "[{\"paramName\":\"id\",\"flowNodeCode\":\"\",\"vModel\":\"value\"},{\"paramName\":\"name\",\"flowNodeCode\":\"\",\"vModel\":\"label\"}]",
              type: 2,
              value: ""
            }
          ]
        },
        {
          label: '选择日期',
          prop: 'date1',
          required: true,
          type: 'date',
          span: 12,
        },
        {
          label: '选择时间',
          prop: 'date2',
          required: true,
          type: 'datetime',
          span: 12,
        },
        {
          label: '即时配送',
          prop: 'delivery',
          required: true,
          type: 'switch',
          span: 24,
        },
        {
          label: '活动性质',
          prop: 'type',
          required: true,
          type: 'checkbox',
          span: 24,
          options:type,
        },
        {
          label: '特殊资源',
          prop: 'resource',
          required: true,
          type: 'radio',
          span: 24,
          options:resource,
        },
        {
          label: '活动备注',
          prop: 'textarea',
          required: true,
          type: 'textarea',
          span: 24,
        },
      ],
    }
  },
  methods:{
     submitForm(formName) {
        this.$refs[formName].validate().then(valid => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
}
</script>
```
:::
#### 表单接组件
通过组件获取选择数据
:::demo
``` html
<template>
  <mg-form :config="options3" :form="form" ref="form2" label-position="right" :status-icon="true" ></mg-form>
</template>
<script>
import pop from './component/pop.vue'
export default {
  data () {
    return {
      form:{
      },
      options3: [
        {
          label: '选择人员',
          prop: 'pop',
          required: true,
          type:'input',
          span: 24,
          dom:pop
        }
      ],
    }
  },
  methods:{}
}
</script>

```
:::

#### Cascader 级联选择器
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
:::demo。
``` html
<template>
  <mg-form :config="options2" :form="form" ref="form3" label-position="right" :status-icon="true" ></mg-form>
</template>
<script>
export default {
  data () {
    const cascader =[{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }]
    return {
      form:{
        cascader:[]
      },
      options2: [
        {
          label: '级联选择器',
          prop: 'cascader',
          required: true,
          type: 'el-cascader',
          span: 24,
          options:cascader,
        },
      ],
    }
  },
  methods:{}
}
</script>
```
:::

<template>
    <div class='py20'>
      Form 属性
      <mg-table  :column="optionsTable.col" :dataList="dataList2 " page="false" :params="optionsTable.params" align='left'  >
      </mg-table>
      Form 属性 ( Element )
      <mg-table  :column="optionsTable.col" :dataList="dataList2El " page="false" :params="optionsTable.params" align='left'  >
      </mg-table>
      Form.config 属性
      <mg-table  :column="optionsTable.col" :dataList="dataList " page="false" :params="optionsTable.params" align='left' >
      </mg-table>
      Form Methods
      <mg-table  :column="optionsTable.col2" :dataList="dataList3 " page="false" :params="optionsTable.params" align='left' >
      </mg-table>
      Form-Item Methods
      <mg-table  :column="optionsTable.col2" :dataList="dataList4 " page="false" :params="optionsTable.params" align='left' >
      </mg-table>
    </div>
</template>
<script>
import pop from './component/pop.vue'
export default {
  components: {  },
  props: {
  },
  data() {
    const region = [{ label: '浙江', value: 1 },{ label: '上海', value: 2 }]
    const type = [{ label: '美食/餐厅线上活动', value: 1 },{ label: '地推活动', value: 2 },{ label: '线下主题活动', value: 3 },{ label: '单纯品牌曝光', value: 4 }]
   const resource = [{ label: '线上品牌商赞助', value: 1 },{ label: '线下场地免费', value: 2 },{ label: '线下场地免费', value: 3 },{ label: '线下场地免费', value: 4 },{ label: '线下场地免费', value: 5 },{ label: '线下场地免费', value: 6 }]
        const cascader =[{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }]
    return {
      options3: [
        {
          label: '选择人员',
          prop: 'pop',
          required: true,
          type:'input',
          span: 24,
          dom:pop
        }
      ],
      options2: [
        {
          label: '级联选择器',
          prop: 'cascader',
          required: true,
          type: 'el-cascader',
          span: 24,
          options:cascader,
        },
      ],
      options: [
        {
          label: '活动名称',
          prop: 'name',
          required: true,
          type: 'input',
          span: 24,
          btn:{
            label:"按钮",
            href:'https://element.eleme.io/#/zh-CN/component/button'
          },
          attrs: {
            maxlength: 20,
            'show-word-limit': true
          }
        },
        {
          label: '活动区域',
          prop: 'region',
          required: true,
          type: 'select',
          span: 24,
          enum:'',
          apiList:[
            {
              apiId: 9,
              blurType: 1,
              param: "[]",
              parameterName: "",
              response: "[{\"paramName\":\"id\",\"flowNodeCode\":\"\",\"vModel\":\"value\"},{\"paramName\":\"name\",\"flowNodeCode\":\"\",\"vModel\":\"label\"}]",
              type: 2,
              value: ""
            }
          ],
        },
        {
          label: '选择日期',
          prop: 'date1',
          required: true,
          type: 'date',
          span: 12,
        },
        {
          label: '选择时间',
          prop: 'date2',
          required: true,
          type: 'datetime',
          span: 12,
        },
        {
          label: '即时配送',
          prop: 'delivery',
          required: true,
          type: 'switch',
          span: 24,
        },
        {
          label: '活动性质',
          prop: 'type',
          required: true,
          type: 'checkbox',
          span: 24,
          options:type,
        },
        {
          label: '特殊资源',
          prop: 'resource',
          required: true,
          type: 'radio',
          span: 24,
          options:resource,
        },
        {
          label: '活动备注',
          prop: 'textarea',
          required: true,
          type: 'textarea',
          span: 24,
        },
/*         {
          label: '级联选择器',
          prop: 'cascader',
          required: true,
          type: 'el-cascader',
          span: 24,
          options:cascader,
        },
        {
          label: '选择人员',
          prop: 'pop',
          required: true,
          type:'input',
          span: 24,
          dom:pop
        } */
      ],
      form: {
        cascader:[]
      },
      optionsTable: {
        params: {},
        col: [
          {
            label: '参数',
            prop: 'name',
            width: '180px'
          },
          {
            label: '说明',
            prop: 'show',
          },
          {
            label: '类型',
            prop: 'type',
            width: '120px'
          },
          {
            label: '可选值',
            prop: 'option',
             width: '220px'
          },
          {
            label: '默认值',
            prop: 'default',
             width: '120px'
          }
        ],
        col2: [
          {
            label: '参数',
            prop: 'name',
            width: '150px'
          },
          {
            label: '说明',
            prop: 'show',
          },
          {
            label: '-',
            prop: 'option',
            width: '400px'
          },
        ]
      },
      dataList:[
        {
         name:'label',
         show:'表单名称',
         type:'string',
         option:'',
         default:'',
        },
        {
         name:'prop',
         show:'默认列字段名，在template为true时，为slot名称',
         type:'string',
         option:'',
         default:'',
        },
        {
         name:'placeholder',
         show:'默认提示',
         type:'string',
         option:'',
         default:'',
        },
        {
         name:'required',
         show:'是否必填',
         type:'boolean',
         option:'true/false',
         default:'false',
        },
        {
         name:'format',
         show:'日期显示类型,只对type=date有效',
         type:'string',
         option:'',
         default:'yyyy-MM-dd',
        },
        {
         name:'type',
         show:'表单类型',
         type:'string',
         option:'input,number,checkbox,radio,switch,select,date,datetime, timerange,daterange,el-cascader,text,textarea等',
         default:'',
        },
        {
         name:'span',
         show:'1-24栅格，24为整行',
         type:'Number',
         option:'',
         default:'',
        },
        {
         name:'attrs',
         show:'属性',
         type:'Object',
         option:"maxlength,show-word-limit 等",
         default:'',
        },
        {
         name:'listeners',
         show:"监听事件和方法的对象，例如：'listeners:{change: this.change}'",
         type:'Object',
         option:"",
         default:'',
        },
        {
         name:'dom',
         show:"外接组件,例如：'dom:组件名'",
         type:'组件',
         option:"",
         default:'',
        },
        {
         name:'enum',
         show:'数字字典字段',
         type:'Array',
         option:"",
         default:'',
        },
        {
         name:'options',
         show:'当页数据集',
         type:'Array',
         option:"",
         default:'',
        },
        {
         name:'hide',
         show:'是否显示',
         type:'boolean',
         option:'true/false',
         default:'false',
        },
        {
         name:'disabled',
         show:'是否可用',
         type:'boolean',
         option:'true/false',
         default:'false',
        },
      ],
      dataList2:[
        {
         name:'config',
         show:'表单属性对象，例如 :config="options"',
         type:'Object',
         option:'',
         default:'',
        },
        {
         name:'form',
         show:'表单对象(v-model)，例如 :form="form"',
         type:'Object',
         option:'',
         default:'',
        },
        {
         name:'rules',
         show:'表单规则验证对象，例如 :rules="rules"',
         type:'Object',
         option:'',
         default:'',
        },
      ],
      dataList2El:[
        {
         name:'inline',
         show:'行内表单模式',
         type:'boolean',
         option:'',
         default:'false',
        },
        {
         name:'label-position',
         show:"表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width",
         type:'string',
         option:'right/left/top',
         default:'right',
        },
        {
         name:'label-width',
         show:"表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。",
         type:'string',
         option:'',
         default:'',
        },
        {
         name:'label-suffix',
         show:"表单域标签的后缀",
         type:'string',
         option:'',
         default:'',
        },
        {
         name:'hide-required-asterisk',
         show:"是否隐藏必填字段的标签旁边的红色星号",
         type:'boolean',
         option:'',
         default:'false',
        },
        {
         name:'show-message',
         show:"是否显示校验错误信息",
         type:'boolean',
         option:'',
         default:'false',
        },
        {
         name:'inline-message',
         show:"是否以行内形式展示校验信息",
         type:'boolean',
         option:'',
         default:'false',
        },
        {
         name:'status-icon',
         show:"是否在输入框中显示校验结果反馈图标",
         type:'boolean',
         option:'',
         default:'false',
        },
        {
         name:'validate-on-rule-change',
         show:"是否在 rules 属性改变后立即触发一次验证",
         type:'boolean',
         option:'',
         default:'true',
        },
        {
         name:'size',
         show:"用于控制该表单内组件的尺寸",
         type:'string',
         option:'medium / small / mini',
         default:'',
        },
        {
         name:'disabled',
         show:"是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效",
         type:'boolean',
         option:'',
         default:'false',
        },
      ],
      dataList3:[
        {
         name:'validate',
         show:"对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise",
         option:'Function(callback: Function(boolean, object))',
        },
        {
         name:'validateField',
         show:'对部分表单字段进行校验的方法',
         option:'Function(props: array | string, callback: Function(errorMessage: string))',
         default:'',
        },
        {
         name:'resetFields',
         show:'对整个表单进行重置，将所有字段值重置为初始值并移除校验结果',
         option:'',
        },
        {
         name:'clearValidate',
         show:'移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果',
         option:'Function(props: array | string)',
        },
      ],
      dataList4:[
        {
         name:'resetField',
         show:'对该表单项进行重置，将其值重置为初始值并移除校验结果',
         option:'',
        },
        {
         name:'clearValidate',
         show:'移除该表单项的校验结果',
         option:'',
        },
      ],
    }
  },
  created(){
    this.options.forEach(temp=>{
      if (temp.apiList && temp.apiList.length > 0) {
        //设置API调用
         this.$setForm.setAPI(temp, {})
      }
    })
    this.$forceUpdate()
  },
  methods:{
     submitForm(formName) {
        this.$refs[formName].validate().then(valid => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
        remote(value){
          this.region.push({ label: '江苏', value: 3 })
    }
  }
  }
</script>

<style lang="less">

.display-none{
  display: block !important;
}
</style>