vue在后端数据不匹配的情况下处理动态表单

模板代码

                 <el-form
                    :model="modelFormRules(row.valueDTOList, td.id)"
                    ref="ruleTrendsForm"
                  >
                    <el-form-item
                      :key="tdIndex"
                      :prop="td.isRequired ? 'value' : ''"
                      :rules="{
                        required: true,
                        message: `${td.name}不能为空`,
                        trigger: ['blur', 'change'],
                      }"
                    >
                      <el-input
                        v-if="td.type === 'TEXT'"
                        :value="getFormValue(row.valueDTOList, td.id)"
                        :type="td.valueType === 'NUMBER' ? 'number' : ''"
                        :placeholder="`输入${td.name}`"
                        @input="handleSetForm(row.valueDTOList, td, $event)"
                      ></el-input>

                      <el-input
                        v-if="td.type === 'TEXTAREA'"
                        :type="
                          td.valueType === 'NUMBER' ? 'number' : 'textarea'
                        "
                        rows="2"
                        :value="getFormValue(row.valueDTOList, td.id)"
                        @input="handleSetForm(row.valueDTOList, td, $event)"
                        :placeholder="`输入${td.name}`"
                      ></el-input>
                      <el-select
                        style="width: 100%"
                        v-if="td.type === 'SELECT'"
                        :value="getFormValue(row.valueDTOList, td.id)"
                        :placeholder="`选择${td.name}`"
                        @change="
                          (val) => {
                            changeProjectRequireValueDTO(
                              row.valueDTOList,
                              td,
                              val
                            );
                          }
                        "
                      >
                        <el-option
                          v-for="selectItem in td.valueDTOList"
                          :key="selectItem.id"
                          :label="selectItem.name"
                          :value="selectItem.name"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <span
                      v-if="td.isRequired"
                      style="
                        color: red;
                        color: red;
                        position: absolute;
                        top: 34%;
                        right: -11px;
                      "
                      >*</span
                    >
                  </el-form>

js逻辑

 getFormValue(valueList, id) {
      const item = valueList.find((item) => item.tempFieldId === id);
      return item ? item.value : "";
    },
    // ID匹配
    handleSetForm(valueList, td, value) {
      const item = valueList.find((item) => item.tempFieldId === td.id);
      if (item) {
        item.value = value;
        item.tempFieldId = td.id;
        item.baseFieldId = td.baseFieldId;
      } else {
        valueList.push({
          tempFieldId: td.id,
          value,
          baseFieldId: td.baseFieldId,
        });
      }
    },
    // change选择框
    changeProjectRequireValueDTO(valueList, td, value) {
      const item = valueList.find((item) => item.tempFieldId === td.id);
      let tempValueId = null;
      let baseValueId = null;
      td.valueDTOList.map((item) => {
        if (item.name === value) {
          tempValueId = item.id;
          baseValueId = item.baseValueId;
        }
      });
      if (item) {
        item.value = value;
        item.baseFieldId = td.baseFieldId;
        item.tempFieldId = td.id;
        item.tempValueId = tempValueId;
        item.baseValueId = baseValueId;
      } else {
        valueList.push({
          baseFieldId: td.baseFieldId,
          tempFieldId: td.id,
          value,
          tempValueId,
          baseValueId,
        });
      }
      console.log(valueList, "valueList");
      console.log(item, "item");
    },