el-from表单在v-if、v-show和自增、自减表单项的时候，会出现表单校验异常或者串项的异常解决办法

一.前言。

日常开发中，表单和表单校验是使用率非常大的组件。本文就针对其在使用过程中容易出现的一种异常来做出对应的处理方案。

二.说明。

这里以动态（自增/自减）表单为例讲解其在使用中，表单项校验的异常情形及处理。

三.核心思路。

为每个el-form-item指定对应且唯一的key属性。

四.主要代码。

html:

<el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      v-loading="loading"
      class="g-form-drawer-main"
    >
      <template v-for="(item, index) in ruleForm.itemList">
        <el-form-item
          label="运营商："
          :prop="'itemList.' + index + '.carrier'"
          :key="item.key"
          :rules="{
            required: true,
            message: '请选择运营商',
            trigger: ['blur', 'change'],
          }"
        >
          <div class="p-form-content">
            <el-select
              class="w-300 umar-r10"
              v-model="item.carrier"
              placeholder="请选择运营商"
              filterable
              clearable
            >
              <el-option
                v-for="i in comList"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item
          label="计划套餐："
          :prop="'itemList.' + index + '.packageId'"
          :key="item.key"
          :rules="{
            required: true,
            message: '请选择计划套餐',
            trigger: ['blur', 'change'],
          }"
        >
          <div class="p-form-content">
            <el-select
              class="w-300 umar-r10"
              v-model="item.packageId"
              placeholder="请先选择运营商后再选择计划套餐"
              filterable
              clearable
            >
              <el-option
                v-for="i in item.packageList"
                :key="i.packageId"
                :label="i.name"
                :value="i.packageId"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <div class="p-form-content bottom-box">
            <el-input
              type="textarea"
              style="width: 300px"
              v-model="item.scene"
              placeholder="请输入业务类型"
            ></el-input>
            <el-button
              v-show="index === 0"
              class="p-el-button addbtn"
              type="success"
              icon="el-icon-plus"
              circle
              @click="addProcess"
            ></el-button>
            <el-button
              v-show="ruleForm.itemList && ruleForm.itemList.length > 1"
              class="p-el-button delbtn"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delProcess(index)"
            ></el-button>
          </div>
       </template>
     </el-form>
     
     
js：

data() {
    return {
      ruleForm: {
        itemList: [
          {
            carrier: "",
            packageId: "",
            packageList: [], 
            key: Date.now()    //确保唯一性
          },
        ],
      },
      comList: [],
      rules: {},
    };
  },
  methods: {
    //新增
    addProcess() {
      const process = {
        carrier: "",
        packageId: "",
        packageList: [],
        key: Date.now()   //确保唯一性
      };
      this.ruleForm.itemList.unshift(process);
    },
    //删除
    delProcess(index) {
      if (this.ruleForm.itemList && this.ruleForm.itemList.length > 1) {
        this.ruleForm.itemList.splice(index, 1);
      } else {
        this.$message({
          message: "至少需保留一个",
          type: "error",
          showClose: true,
        });
      }
    },  

五.效果图。

• 未指定对应且唯一key的情况：

• 指定了唯一key的情况：

六.体会。

el-form动态表单，官方的案例是给每一项el-form-item绑定了key值（:key="domain.key"），不过这里有个问题就是domain对象下的key如果是不存在或者是不唯一的，那么就容易造成动态表单各种翻车，所以解决办法就是改写其中的key绑定的值，必须是要存在且唯一性的。