antd-vue中時間選擇器，treeSelect，select的使用

在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);
    },