在form中的使用,数据均为请求后端数据

 <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch">
                    <a-row>
                      <a-col :span="12">
                        <a-form-item
                          label="出生日期:"
                          :label-col="{ span: 5 }"
                          :wrapper-col="{ span: 14 }"
                        >
                          <a-date-picker
                            style="width:300px"
                            format="YYYY-MM-DD HH:mm:ss"//此处设置日期输出类型
                            v-decorator="[
                          `birthday`,
                          ]"
                            @change="onAgeChange"
                          />
                        </a-form-item>
                      </a-col>
                    
                      <a-col :span="12">
                        <a-form-item
                          label="选择系统"
                          :label-col="{ span: 5 }"
                          :wrapper-col="{ span: 14 }"
                        >
                          <a-tree-select
                            :treeData="treeData"
                            v-model="values"
                            @change="onChange"
                            treeCheckable
                            :showCheckedStrategy="SHOW_PARENT"
                            placeholder="请选择系统"
                          />
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item
                          label="选择角色"
                          :label-col="{ span: 5 }"
                          :wrapper-col="{ span: 14 }"
                        >
                          <a-select
                            v-decorator="[
                `roleIds`,
               
              ]"
                            mode="multiple"
                            style="width: 100%"
                            @change="selectChange"
                            placeholder="请选择角色"
                          >
                            <a-select-option
                              v-for="item in sysRoleList"
                              :key="item.key"
                            >{{item.roleName}}</a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                    
                      <a-col :span="24">
                        <a-form-item style="text-align:center">
                          <a-button type="primary" html-type="submit">添加</a-button>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-form>

js部分获取数据提交表单，以及数据修改时的反显

export default {
  data() {
   
    return {
     
      deptTreeList: [],
      sysRoleList: [],
      deptIds: [],
      dateString: "", //选择出生日期
      form: this.$form.createForm(this),
    };
  },
  created() {
    let self = this;
    self.userSysList(); //调用获取用户数据请求
    self.getRoleList(); //获取角色列表
    self.getTreeList(); //获取机构数据
  },
  methods: {
    onAgeChange(date, dateString) {
      console.log(dateString);
      this.dateString = dateString;
    },
    onChange(value) {
      //系统选择的change函数
      this.values = value;
    },
    onChanges(value) {
      //机构选择的change函数
      this.deptIds = value;
    },

    handleSearch(e) {
      e.preventDefault(); //阻止默认提交时刷新页面
      this.form.validateFields((err, values) => {
        if (!err) {
         
          values.deptIds = this.deptIds.join(",");
          values.roleIds = values.roleIds.join(",");
          values.systemTags = this.values.join(",");
          values.birthday = this.dateString;
          if (this.attribute == 1) {
            if (this.blur.includes(false)) {
              this.$message.info("您输入的信息存在格式错误请查看");
            } else {
              if (this.blur.length === 5) {
                console.log("正则均一一进行验证");
                this.addUser(values); //效验成功，调用添加请求
              }
            }
          } else if (this.attribute == 0) {
            values.userId = this.userId;
            this.updateSysList(values); //修改请求
          }
        }
      });
    },


    edit(record) {//点击修改时进行的数据反显~~~~
      setTimeout(() => {
        //由于不能再页面渲染之前修改表单这边加上定时器防止报错
        this.form.setFieldsValue({
          birthday: moment(record.birthday),
          roleIds: record.roleIds.split(",")
        });
        this.deptIds = record.deptIds.split(",");
      }, 0);
    },