vue 表格实现添加删除，支持表单校验

效果图：

完整代码：

<el-form :model="form" ref="formSheet" :rules="rulesSheet" label-width="1rem">
            <el-form-item label="规格参数：">
              <el-table class="common-global-el-table" ref="lower" :data="form.paramList" :header-cell-style="{
                backgroundColor: 'rgba(255,255,255,0.09) !important',
                color: 'rgba(255,255,255,1)',
                fontFamily: 'PingFangSC',
                fontSize: '.14rem',
              }">
                <el-table-column type="index" :width="0.6 * $bigScreen()" align="center" label="序号"></el-table-column>
                <el-table-column label="参数名称" :width="2.8 * $bigScreen()">
                  <template slot="header">
                    <span style="color: red;">*</span> 参数名称
                  </template>
                  <template slot-scope="scope">
                    <div class="customInput">
                      <el-form-item v-if="!scope.row.isText" :prop="'paramList.' + scope.$index + '.name'"
                        :rules="rulesTable.name">
                        <el-input v-model="scope.row.name" style="width: 2.1rem" @blur="handleDelayBlur(scope.row)"
                          placeholder="请输入"></el-input>
                      </el-form-item>
                      <span v-else>{{ scope.row.name }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="单位">
                  <template slot="header">
                    <span style="color: red;">*</span> 单位
                  </template>
                  <template slot-scope="scope">
                    <div class="customInput">
                      <el-form-item v-if="!scope.row.isText" :prop="'paramList.' + scope.$index + '.unit'"
                        :rules="rulesTable.unit">
                        <el-input v-model="scope.row.unit" style="width: 2.1rem" @blur="handleDelayBlur(scope.row)"
                          placeholder="请输入"></el-input>
                      </el-form-item>
                      <span v-else>{{ scope.row.unit }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="参数值">
                  <template slot="header">
                    <span style="color: red;">*</span> 参数值
                  </template>
                  <template slot-scope="scope">
                    <div class="customInput">
                      <el-form-item v-if="!scope.row.isText" :prop="'paramList.' + scope.$index + '.value'"
                        :rules="rulesTable.value">
                        <el-input v-model="scope.row.value" style="width: 2.1rem" @blur="handleDelayBlur(scope.row)"
                          placeholder="请输入"></el-input>
                      </el-form-item>
                      <span v-else>{{ scope.row.value }}</span>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="操作" :width="1.5 * $bigScreen()">
                  <template slot-scope="scope">
                    <div class="table-column-buttons">
                      <div class="table-column-btn" @click.stop="handleInsert(scope.row)">
                        <svg-icon icon="tianjia" />
                        <span>添加</span>
                      </div>
                      <div class="table-column-btn" :class="form.paramList.length <= 1 ? 'opt-disabled' : 'opt-btn'
                        " @click.stop="handleDelte(scope.$index)">
                        <svg-icon icon="delete" />
                        <span>删除</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-form>
          
          
       rulesTable: {
        name: [
          { required: true, message: '请输入参数名称', trigger: 'change' },
        ],
        unit: [
          { required: true, message: '请输入单位', trigger: 'change' },
        ],
        value: [
          { required: true, message: '请输入参数值', trigger: 'change' },
        ],
      },
      
      paramList: [
          { name: "", unit: '', value: '', equipId: '', sort: '1' }
        ],
        
        handleInsert(row) {
      this.$refs['formSheet'].validate(async valid => {
        if (valid) {
          let index = Number(row.sort ) + 1;
          row.isText = true;
          this.form.paramList.push({ name: "", unit: '', value: '', sort: index, isText: false, equipId: ''})
        }
      })
    },

    // table 删除
    handleDelte(index) {
      if (this.form.paramList.length <= 1) return;
      this.form.paramList.splice(index, 1);
      this.formp.paramList.map((item, ind) => (item.sort = ind)); 
    },
    
    handleConfirm() {
      this.$refs["formSheet"].validate(async (valid) => {
        if (!valid) { return }
        let res = {}
        this.loading = true;
        let params = JSON.parse(JSON.stringify(this.form));
        params.paramList.forEach((item) => {
          delete item.isText
          item.equipId = this.form.number
        })
        this.form.projectId = sessionStorage.getItem("projectId")
        if (this.pageType == "add") {
          res = await workderAdd(this.form);
        } else {
          res = await modifyWorkderPage(params);
        }
        console.log(2222)
        this.$message({
          message: res.message,
          type: res.code == "0" ? "success" : "error",
        });
        this.loading = false;
        setTimeout(() => {
          if (res.code == "0") {
            this.handleClose();
          }
        }, 1000)
      })
    },

END...