栅格布局

栅格布局通过row 设置行，通过col设置列，ant的栅格为24栅格系统

col属性的span控制占一行的几份(0为不显示，24会占满一行)

<a-row>
    <a-col></a-col>
</a-row>

配合a-form时踩坑

控制 整体需求居中对齐，label文字居右对齐

<a-form>
	<a-row :gutter="24">
    	<a-col :span='12'>
                <a-form-item 
                    :label-col="formItemLayout.labelCol" 
                    :wrappercol="formItemLayout.wrapperCol" label="Label">
          <a-input
            placeholder="请输入"
          />
        </a-form-item>
        </a-col>
    </a-row>
</a-form>
data>
const formItemLayout = {
  labelCol: { span: 6 },  //控制label占比
  wrapperCol: { span: 10 } //控制输入框占比
}

表单

a-form 组件加上 :form="form"

//并且在beforeCreate阶段加上,data中不需要声明form
 this.form = this.$form.createForm(this, { name: 'dynamic_form_item' })

//表单项需要使用
v-decorator="['绑定的字段名', { rules: [{ required:(是否必填), message: '请选择' }], initialValue: '默认值' }]"
//绑定

即可通过this.form.vaidateFelds((err,form)=>{err:错误信息,form:成功后的表单对象})验证并获取表单

更灵活的使用方式

数据请求完毕自动填充所有表单项

this.form.setFieldsValue({
    '表单项':value
    ...
})

自定义表单字段

例如ant上传文件组件是没有value值的，这时我们可以自定义一个表单字段，监听上传完成事件，操作该字段，收集上传完成后的url

beforeCreate(){
    this.form = this.$form.createForm(this, { name: 'dynamic_form_item' }) 
    this.form.getFieldDecorator('keys', { initialValue: [1], preserve: true })
    //keys:表单字段  
    //initialValue: 默认值
    //preserve:布尔值，true表示 即便字段不再使用，也保留该字段的值
    //更多属性查询：https://www.antdv.com/components/form-cn/#API
}

上传文件组件的beforeUpload事件

-上传请求完毕
	-拿到url根据场景是否需要格式化
	const {url,id,fileName} = res.result
	this.fileList.push({
            name: fileName,
            uid: id,
            url,
            status: 'done'
          })
	this.form.setFieldsValue({
        绑定字段：this.fileList
    })

文件移除时remove回调更新form

handleRemove(data){
    //过滤掉
    this.fileList=this.fileList.filter(item=>item.uid !== data.uid)
    this.form.setFieldsValue({...}) //设置
    //this.fileList为upload绑定的上传后的值
}

动态表单(多个)

通过维护一个keys数组遍历生成表单项与获取数据用

在a-form下使用v-for循环生成

<a-row v-for="k of myFormKeys" :key="k">
    //myFormKeys 的默认值 应该从0开始 
    // myFormKeys:[0]

• 数据通过遍历k进行动态绑定

v-decorator="[`paidRemark[${k}]`, { rules: [{ required: false, message: '请输入摘要 ' }]}]"

新增表单项目方法

addFormItem(){
    // 取最后一项的值
	const lastkey = this.myFormKeys[this.myFormKeys.length - 1]
    this.myFormKeys.push(lastkey + 1)
}

表单项的最后应该有 删除图标，删除对应表单项

<a-icon
 v-show="myFormKeys.length != 1"
 @click="removeKey(k)"
 class="dynamic-delete-button"
 type="minus-circle-o"
/>
// removeKey方法
 removeKey(k){
   this.myFormKeys = this.myFormKeys.filter((item) => item !== k)
 }

每个表单项目默认值设置，使用 v-decorator的options.initialValue设置，但注意的是如果有清空表单的需要，使用form.resetFileds()清空时表单项会重置成该值

• 收集数据

Submit(){
this.form.validateFields((err, values) => {
    //格式化数据 
    //values的数据一般为{key:[keyValue1,keyValue2]...}
    //接口一般需要[{key:value},{key:value}...]
const data = []
          for (const item of this.myFormKeys) {
            // item 当前有值的下标
            data.push({
                key: values.key[item]
            })
          }
}
  //后续逻辑