vue表格与表单校验联动，下拉联动，列表增加、删除

先看效果图

<template>
  <div class="app-container">
    <el-form :model="allData" ref="allForm">
      <el-col :span="24" class="tableBox">
        <el-table :data="allData.tableData" row-key="id">
          <el-table-column label="操作" align="center" width="50" class-name="small-padding fixed-width" fixed="left" >
            <template slot-scope="scope">
              <i class="el-icon-error" @click="delList(scope.$index, scope.row)" style="font-size: 30px" v-show="scope.$index != 0"></i>
            </template>
          </el-table-column>
          <el-table-column prop="productCode" label="产品编码" :show-overflow-tooltip="true" width="200">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.productCode'" :rules="tableAllRules.productCode">
                <el-select clearable v-model="scope.row.productCode" placeholder="请选择" @change="codeChange(scope.$index,scope.row)" :disabled="isdisplay">
                  <el-option v-for="dict in productList" ::key="dict.productCode" :label="dict.productCode" :value="dict.productCode"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="产品名称" :show-overflow-tooltip="true" width="200"></el-table-column>
          <el-table-column label="生效日期">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.effectiveStart'" :rules="tableAllRules.effectiveStart">
                <el-date-picker v-model="scope.row.effectiveStart" type="date" value-format="yyyy-MM-dd" :disabled="isdisplay"></el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="失效日期">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.effectiveEnd'" :rules="tableAllRules.effectiveEnd">
                <el-date-picker v-model="scope.row.effectiveEnd" type="date" value-format="yyyy-MM-dd" :disabled="isdisplay"></el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="leixing" label="保单类型" :show-overflow-tooltip="true" width="200">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.leixing'" :rules="tableAllRules.leixing">
                <el-select clearable v-model="scope.row.leixing" placeholder="请选择" :disabled="isdisplay">
                  <el-option v-for="dict in policyTypeList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="one" label="手续费" :show-overflow-tooltip="true" width="200">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.one'" :rules="tableAllRules.one">
                <el-input v-model="scope.row.one" placeholder="请输入内容" :disabled="isdisplay"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-form>
    <i class="el-icon-circle-plus-outline" @click="addList()" style="font-size: 30px; margin: 10px" ></i>
    <div class="btnBox" style="justify-content: center; width: 100%; padding-top: 20px">
      <el-button type="primary" @click="submitForm('allForm')">修改</el-button>
      <el-button @click="resetForm('allForm')">关闭</el-button>
    </div>
  </div>
</template>

data部分，根据自己需求更改

data() {
	const numberYear = (rule, value, callback) => {
	  if (value > 0 && value <= 1) {
	    callback();
	  } else {
	    callback(new Error('请输入>0且≤1的数字'));
	  }
	};
  return {
    allData: {
      tableData: [{}],
    },
    productList: [{
    	effectiveEnd: "2023-06-27",
    	effectiveStart: "2023-06-06",
    	productCode: "0001",
    	productId: 2,
    	productName: "保险",
    	productState: "2"
    ]},
    policyTypeList: [
      { dictLabel: '新保', dictValue: '0' },
      { dictLabel: '续保', dictValue: '1' },
    ],
    tableAllRules: {
		productCode: [{ required: true, message: '请选择', trigger: 'change' }],
	  effectiveStart: [{ required: true, message: '请选择', trigger: 'change' }],
	  effectiveEnd: [{ required: true, message: '请选择', trigger: 'change' }],
	  leixing: [{ required: true, message: '请选择', trigger: 'change' }],
	  one: [{ required: true, validator: numberYear, trigger: 'blur' }],
	},
  };
},

添加、删除、下拉联动方法

methods: {
      // 新增
      addList() {
        var str = { productCode: '', productName: '', effectiveStart: '', effectiveEnd: '', leixing: '', one: '' };
        this.allData.tableData.push(str);
      },
      // 删除
      delList(index, row) {
        this.allData.tableData.splice(index, 1);
      },
      // 产品编码更改
      codeChange(index,row) {
        const data = this.productList?.find((item) => item.productCode === row.productCode);
        if (row.productCode) {
          row.productName = data.productName;
          this.$set(this.allData.tableData[index],'effectiveStart',data.effectiveStart)
          this.$set(this.allData.tableData[index],'effectiveEnd',data.effectiveEnd)
        } else {
          row.productName = undefined;
          row.effectiveStart = undefined;
          row.effectiveEnd = undefined;
        }
      },
      // 保存
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.allData);
          }
        });
      },
    }