AntDesignVue中form表单取值（v-decorator）_v-decorato a-select表单取值

• 通过 v-decorator 进行表单验证

rules：校验规则设置（required是否必填，max最大长度，min最小长度，message提示信息，parttern正则匹配，validator验证器）

validateTrigger：触发校验（一般为change，blur等）

initialValue:设置初始值

//内置验证规则
<a-form-item label="课程名称" v-bind="formItemLayout">
  <a-input 
    placeholder="课程名称" 
    v-decorator="['name', { 
      rules: [{ required: true, max: 50, message: '必填项，最大50字符' }] }
      initialValue:"数学"
    ]" />
</a-form-item>
 
//自定义验证规则01
<a-form-item>
  <a-input 
    size="large"
    type="text"
    placeholder="手机号"
    v-decorator="['mobileNumber', {
      rules:[{required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号'}],
      validateTrigger: 'change'
    }]">
  </a-input>
</a-form-item>
 
//自定义验证规则02
<a-form-item v-bind="formItemLayout" label="手机号码">
  <a-input 
    placeholder="手机号码"
    v-decorator="['mobileNumber',{
      rules:[{required:true,max:11,message:'请输入正确格式的手机号码',validator: MobileNumberValidator}]}]" />
</a-form-item>
//在methods中设定方法
// 手机号验证
MobileNumberValidator (rule, value, callback) {
  const idcardReg = /^1(3|4|5|6|7|8|9)\d{9}$/
  if (!idcardReg.test(value)) {
    // eslint-disable-next-line standard/no-callback-literal
    callback('非法格式')
  }
  // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
  callback()
}

• 下拉选择框的 labelInValue 属性

通常情况下，通过this.form.getFieldValue("xxx")，只能获取一个数组包含value值，形如["A","B"]，而通过labelInValue属性可以得到[{key: "Aid",label: "Aname"},{{key: "Bid",label: "Bname"}}]

<a-form-item label="ABC" v-bind="formItemLayout">
  <a-select 
    labelInValue 
    placeholder="请选择" 
    v-decorator="['courseTeacherList', {     
      rules: [{ required: true, message: '必填项，请选择' }] }]"
  >
    <a-select-option v-for="item in List"
      :key="item.id"
      :value="item.id">{{ item.name }}</a-select-option>
  </a-select>
</a-form-item>

• 通过 v-decorator 进行内置的双向绑定

//获取一个输入控件的值
this.form.getFieldValue("xxx");
 
//获取一组输入控件的值，如不传入参数，则获取全部组件的值
this.form.getFieldsValue(["xxx","yyy"]);
this.form.getFieldsValue();
 
//设置一组输入控件的值
this.form.setFieldsValue({
	xxx:res.result["xxx"],
	yyy:res.result["yyy"],
})
 
//设置一组输入控件的值  加了labelInValue属性
this.form.setFieldsValue({
	userName:{
		label:res.result["userName"],
		key:res.result["userNameId"]
	}
})
 
//关闭表单清空表单数据
this.form.resetFields();
 
//提交表单获取数据
//通过this.form.validateFields函数进行表单验证以及数据获取
handleSubmit () {
  this.form.validateFields((err, values) => {
    if (!err) {
      this.$message.error('保存成功')
    } 
  })
},