el-form复杂表单的校验，可动态添加删除

小鱼儿心语： 没有人会关心你付出过多少努力，撑得累不累，摔的痛不痛，他们只会看你最后站在什么位置，然后羡慕嫉妒恨。

项目场景：

项目场景：一些大型的项目中，不仅仅是简单的 form表单校验，可能会有一些复杂的表单校验，如下图所示，带新增删除功能，同时删除新增的表单也需要做校验：

关键点：

• 新增删除是对数组进行的操作，当然要遍历循环数组喽
• props正常是要对应某个form中的元素，此时要对应list中的元素，该如何对应??通过
  :prop="machineList.${index}.***"
• rules中的校验该如何校验呢:只能在元素中写上对应的校验，否则无法实现校验

完整代码实现：

<el-form ref="taskRef" :model="form" :rules="rules" label-width="130px" inline>
        <el-form-item label="参与人员">
          <el-button type="primary" class="addbtn" @click="addbtn">添加一条</el-button>
        </el-form-item>
        <div v-for="(items,index) in form.taskRel" :key="index">
          <el-button type="danger" icon="Delete" circle @click="deleteHeaderRow(index)"/>
          <el-form-item label="参与单位" :prop="`taskRel.${index}.deptId`" 
            :rules="{
              required: true,
              message: '请选择参与单位',
              trigger: 'change',
            }" label-width="100">
              <el-tree-select
                v-model="items.deptId"
                :data="items.deptOptions"
                :props="{ value: 'id', label: 'label', children: 'children' }"
                value-key="id"
                placeholder="请选择参与单位"
                :check-strictly="false"
                @change="changedept(items,index)"
                style="width: 470px;"
              />
          </el-form-item>
          <el-form-item label="参与人员" :prop="`taskRel.${index}.name`" 
            :rules="{
              required: true,
              message: '请选择参与人员',
              trigger: 'blur',
            }">
            <el-select
              v-model="items.name"
              filterablesize="small" 
              placeholder="请选择参与人员"
              multiple
              @change="changeuser(items)"
              style="width: 470px;">
              <el-option 
                v-for="(item,index) in items.userList" 
                :key="index" 
                :label="item.userName" 
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>

<script setup name="Task">
    const data = reactive({
      form: {taskRel:[]},
    }
    // 点击加号:添加一行header
    function addbtn() {
      form.value.taskRel.push({ deptId: '', name:'',partPeopleId: '', deptOptions:[], userList:[] });
    };

    // 点击减号:删除一行header
    function deleteHeaderRow (index) {
      form.value.taskRel.splice(index, 1);
    };
</script>

简单的小功能，希望可以帮助到你哦~~_///(^v^)\~~