vue2 和 vue3 antd 使用Form表单修改编辑时循环对象，使用对象属性的唯一性赋值，antd表单赋值时：赋多赋少都会报错喔

1、需求：点击表格某一行的修改按钮，出现修改弹窗并且赋值(表格是父组件、弹窗子组件)

2、如果只是一两个值，一一赋值就行，但遇到很多的表单项，一一赋值代码就变多了，所以才有了此方法，三个注意点的：

// 1、需要特殊处理过的，比如后台返回的是数字，而表单需要的boolean
let noDataLableShowStatus
if(values.noDataLableShowStatus == 2) {
  noDataLableShowStatus = true;
} else {
  noDataLableShowStatus = false;
}
// 2、循环对象，利用对象属性的唯一性，但是记得别忽略对 0 的判断
for (let i in formData) {
  values[i] = data[i] || data[i] == 0 ? data[i] : undefined;
}
// 3、赋值好了，还要对字符串进行前后空格的处理
for (let i in formData) {
  values[i] = data[i] || data[i] == 0 ? data[i] : undefined;
  typeof values[i] == "string"
      ? (values[i] = values[i].replace(/(^\s*)|(\s*$)/g, ""))
      : "";
}

3、vue2和vue3完整代码如下：

// vue2: 父组件
<a-modal
  class="apply-modal"
  v-model="addPop"
  :title="this.isEdit ? '修改' : '新增'"
  @cancel="handleCancel"
  @ok="handleOk"
  :confirmLoading="addLoading"
  :width="500"
>
  <add-content ref="addCont"></add-content>
</a-modal>
//新增修改点击事件
addNew(isEdit, editInfo) {
  this.addPop = true;
  this.editId = editInfo.id;
  this.isEdit = isEdit;
  if (isEdit) {
    this.$nextTick(() => {
      this.$refs.addCont.setValues(editInfo);
    });
  }
},
// vue2：子组件
setValues(data) {
  let noDataLableShowStatus, values
  if(values.noDataLableShowStatus == 2) {
    noDataLableShowStatus = true;
  } else {
    noDataLableShowStatus = false;
  }
  let formData = this.form.getFieldsValue();
  for (let i in formData) {
    values[i] = data[i] || data[i] == 0 ? data[i] : undefined;
    typeof values[i] == "string"
      ? (values[i] = values[i].replace(/(^\s*)|(\s*$)/g, ""))
      : "";
  }
  this.$nextTick(() => {
    this.form.setFieldsValue({
      ...values,
      noDataLableShowStatus
    });
  });
},
// vue3： 父组件
<a-modal
  class="edit-modal"
  :visible="editPop"
  :title="isEdit ? '修改测站' : '新增测站'"
  @cancel="handleCancel"
  @ok="handleOk"
  :confirmLoading="editLoading"
  :width="900"
>
  <edit-content ref="editRef" :isEdit="isEdit" :siteTypeList="siteTypeList" :regionList="regionList" :basinList="basinList" :liaisonList="liaisonList"></edit-content>
</a-modal>
// 新增修改
const handleEdit = async (boolean, obj) => {
  isEdit.value = boolean;
  editPop.value = true;
  editId.value = obj.id;
  if (isEdit.value) {
    // 单个修改
    await nextTick(() => {
      editRef.value.setValues(obj);
    });
  }
};
// vue3： 子组件
const setValues = (data) => {
  if(data) {
    // formData.stationCode = data.stationCode;
    // formData.stationName = data.stationName;
    // formData.regionId = data.regionId;
    // formData.basinId = data.basinId;
    // formData.stationTypeId = data.stationTypeId;
    // formData.stationAddress = data.stationAddress;
    // formData.liaison = data.liaison;
    // formData.longitude = data.longitude;
    // formData.latitude = data.latitude;
    // formData.elevation = data.elevation;
    // formData.maintenanceUnit = data.maintenanceUnit;
    for(let key in formData) {
      formData[key] = data[key] || data[key] == 0? data[key]: undefined;
      typeof formData[key] == 'string'? (formData[key] = formData[key].replace(/(^\s*)|(\s*$)/g, "")): ""
    }
    console.log(formData);
  }
};

4、正则解析：

^是开始
\s是空白
*表示0个或多个
|是或者
$是结尾
g表示全局

阳光就是最好的滤镜！