ant design vue 表单在提交和编辑页面的使用

1使用

因为考虑加载速度，框架不是全局引用，需要什么就引入需要的组件。

1.1引入

import Vue from 'vue'
import {Row, Col, Input, Button, Icon, Form, Avatar, Skeleton, Empty, Alert, Popover, Checkbox} from 'ant-design-vue';
Vue.use(Col);
Vue.use(Input);
Vue.use(Icon);
Vue.use(Button);
Vue.use(Row);
Vue.use(Form);
Vue.use(Avatar);
Vue.use(Skeleton);
Vue.use(Empty);
Vue.use(Alert);
Vue.use(Popover);
Vue.use(Checkbox);

 1.2html

       <a-form :form="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 15 }">
          <a-form-item label="标题：">
            <a-input
              v-decorator="['name', { rules: [{ required: true, message: '请输入名称' }] }]"
              :disabled="editStatus"
              placeholder="请输入名称"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="编号：" :class="errorCode ? 'ant-form-item-with-help': ''" class="cveIdBox">
            <a-input
              v-decorator="['code', { rules: [{ required: true, message: '请输入编号' }] }]"
              @blur="checkCve"
              @change="changeCve"
              placeholder="请输入编号"
              autocomplete="off"
            />
            <div :class="errorCode ? 'ant-form-explain' : ''">{{errorCode}}</div>
          </a-form-item>
          <a-form-item label="地址：">
            <a-input
              v-decorator="['address', { rules: [{ required: true, message: '请输入地址' }] }]"
              placeholder="请输入地址"
              :disabled="editStatus"
              autocomplete="off"
            />
          </a-form-item>
            //v-preventReClick是自定义的防重点功能
            <a-button type="primary" @click="handleSubmit" html-type="submit" v-preventReClick>
              提交
            </a-button>
          </a-form-item>
        </a-form>

1.3data

form: this.$form.createForm(this, { name: 'coordinated' }),
errorCode: null,//后端返回错的提示，自定义的一个div标签

 2事件

2.1输入框的change

changeCve() {
    this.errorCode = null;//清空后端返回的错误提示
},

2.2提交

handleSubmit(e) {
    let self = this;
    this.form.validateFields((err, values) => {
        if (!err) {
            self.submitVulFun(values)
        }
    });
},
async submitVulFun(values) {
    let params = {
        name: values.name,
        coed: values.coed,
        address: values.address,
     };
     const res = await add(params);
     if (res.data.code === 1) {
        this.$message.success("提交成功，请等待审核通过！", 3).then(() => {
        //成功3秒后事件处理
          this.$router.push(sessionStorage.getItem('toPath'))
        });
      } else {
        this.$message.error(res.data.msg);
      }
},

2.3编辑页面回填

self.form.resetFields();//重置表单
//getData获得后端返回的数据
let newArr = {
    name: self.getData.name,
    code: self.getData.code,
    address: self.getData.address,
    };
self.$nextTick(() => {
    self.form.setFieldsValue(newArr);//回填到表单
});