关于Ant Design Vue表单和v-decorator

前言：

在开发中遇到了蚂蚁的表单以及对v-decorator的使用

一、form表单的使用

1.创建表单

• Ant Design Vue获取表单的数据其实就是使用v-decorator的方式去给每个项去注册，然后才能通过组件去获取表单的数据，同时根据条件校验必填项；

<template>
  // :form="form" 注册（具体参考组件官网）
  <a-form :form="form">
    <!-- 课程名称 -->
    <a-form-item
        :labelCol="labelCol" //这是样式
        :wrapperCol="wrapperCol" //这是样式
        label='课程名称：'
      >
      //courseName 给表单赋值或获取表单数据时，input对应的key
      <a-input
        v-decorator="['courseName', { rules: [{ required: true, message: '请填写课程名称' }] }] placeholder="请输入课程名称"/>
    </a-form-item>
  </a-form>
</template>

export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 },
      },
      form: this.$form.createForm(this), // 必须这样注册才能通过表单拿到数据
    }
  }
}

2.获取数据的方法

• 通过validateFields的方法，可以校验必填项是否有值，若无，则页面会给出警告！

this.form.validateFields((errors, values) => {
  if (errors) {
    // 这里做逻辑处理
    console.log(values) // { courseName: '' }
  }
   // 也可以取反完成逻辑
   // if (!errors) {
   //   console.log(values)
   // }
}

3.自定义校检

• 自带方法是从你开始输入时就在校验，警告一直存在，直到你输入完整才会消失，而且为了更好体验及逻辑的实现，你或许需要自定义

<template>
  // :form="form" 注册（具体参考组件官网）
  <a-form :form="form">
    <!-- 课程名称 -->
    <a-form-item
        :labelCol="labelCol" //这是样式
        :wrapperCol="wrapperCol" //这是样式
        label='课程名称：'
      >
      //courseName 给表单赋值或获取表单数据时，input对应的key
      <a-input
        v-decorator="['courseName', { rules: [{ required: true, message: '请填写课程名称' }] }] placeholder="请输入课程名称"/>
    </a-form-item>
  </a-form>
      <a-button @click="handleCancel">取消</a-button>
      <a-button :loading="confirmLoading" type="primary" @click="handleNext(courseStep)">
        {{ (courseStep === 1 && '完成') || '下一步' }}
      </a-button>
</template>

const stepForms = [['courseName']] //这里你可以通过数组的形式完成多步骤判断
export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 },
      },
      form: this.$form.createForm(this), // 必须这样注册才能通过表单拿到数据
      confirmLoading: false,
      courseStep: 0,
    }
  },
  methods:{
     handleNext(step) {
      // 处理下一步或者完成事件
      const {
        form: { validateFields },
      } = this
      const courseStep = step + 1
      if (courseStep <= 1) {
        validateFields(stepForms[this.courseStep], (errors, values) => {
          if (!errors) {
            this.courseStep = courseStep
          }
        })
        return
      }


      //这里可以写你的逻辑

    },
}

4.对默认项进行赋值

• 只有通过setFieldsValue方式给表单赋值，才能获取到表单的值，其他设置默认值的方式，获取不到表单默认值。

this.form.setFieldsValue({
       courseName: '这是赋值操作',
 })

5.清空表单数据

• this.form.resetFields()可以清空填写的表单数据

    handleCancel() {
      // 写在方法里完成清空表单数据
      this.form.resetFields()
    },

这里有监听失去焦点后就校检的文章