ant-desigin-vue 中 form 表单的使用

父组件信息通过 ref 绑定 userEdit 节点上。

<!-- 修改用户 -->
<user-edit
  ref="userEdit"
  @close="handleUserEditClose"
  @success="handleUserEditSuccess"
  :userEditVisiable="userEdit.visiable">
</user-edit>

edit (record) {
  this.$refs.userEdit.setFormValues(record)
  this.userEdit.visiable = true
},

子组件如何接收数据呢？

setFormValues ({...user}) {
  console.log(user)
},

setFieldsValue：设置一组输入控件的值，给表单赋值。

setFormValues ({...user}) {
  this.userId = user.userId
  let fields = ['realName', 'username', 'status', 'address', 'description']
  Object.keys(user).forEach((key) => {
    if (fields.indexOf(key) !== -1) {
      this.form.getFieldDecorator(key)
      let obj = {}
      obj[key] = user[key]
      this.form.setFieldsValue(obj)
    }
  })
  if (user.roleId) {
    this.form.getFieldDecorator('roleId')
    let roleArr = user.roleId.split(',')
    // 给表单赋值
    this.form.setFieldsValue({'roleId': roleArr})
  }
},

createForm：创建表单。获取表单的数据是使用 v-decorator 的方式去给每个项去注册，这样才能通过组件去拉取表单的数据，同时对必填项做校验。

<a-form :form="form">
  <a-form-item label='账号' v-bind="formItemLayout">
    <a-input readOnly v-decorator="['username']"/>
  </a-form-item>
  <a-form-item label='角色' v-bind="formItemLayout">
    <a-select
      :allowClear="true"
      style="width: 100%"
      v-decorator="[
        'roleId',
        {rules: [{ required: true, message: '请选择角色' }]}
      ]">
      <a-select-option v-for="r in roleData" :key="r.roleId.toString()">{{r.roleName}}</a-select-option>
    </a-select>
  </a-form-item>
</a-form>

export default {
  data () {
    return {
      form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据
    }
  },
}

validateFields：校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件。

getFieldsValue：获取一组输入控件的值，如不传入参数，则获取全部组件的值。

// 拉取表单数据的方法
this.form.validateFields((err, values) => {
  if (!err) {
    let user = this.form.getFieldsValue()    
  }
})

resetFields：重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件

this.form.resetFields()

initialValue：子节点的初始值，类型、可选值均由子节点决定。

<a-input v-decorator="['username',{rules: [{ required: true, message: '账号不能为空'}], initialValue: 'admin'}]"/>