The front end adds and deletes functions to the elementui table based on the row index.

renderings

 Click Add: Add a row to the list,

Click Delete: If a list row is checked, the checked row will be deleted.

Code:

html：

<div style="display: flex; width: 400px; margin-bottom: 10px">
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="addSupplier"
                style="width: 150px; border-radius: 4px; height: 40px"
                >添加</el-button
              >
              <el-button
                plain
                icon="el-icon-delete"
                @click="deleteSupplier"
                style="width: 100px; border-radius: 4px; height: 40px"
                >删除</el-button
              >
            </div>
              <div
            style="
              display: flex;
              flex-direction: column;
              width: 100%;
              margin-left: 32px;
            "
          >
            <el-table
              ref="multipleTable"
              :data="form.dynamicItem"
              tooltip-effect="dark"
              :row-class-name="tableRowClassName"
              border
              :header-cell-style="{
                background: '#F2F3F5',
                padding: '5px 0',
                color: '#333',
                fontSize: '14px',
                height: '50px',
              }"
              :cell-style="{
                padding: '5px 0',
                fontSize: '14px',
              }"
              style="margin-left:80px ;"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column type="index" width="50" label="序号">
              </el-table-column>
              <el-table-column prop="purchasePrice" label="收款人姓名" width="200">
                <template slot-scope="scope">
                  <el-input
                    v-model="form.dynamicItem[scope.$index].bankAcc"
                    placeholder="请输入收款人姓名"
                    type="text"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="purchasePrice" label="收款人账号" width="200">
                <template slot-scope="scope">
                  <el-input
                    v-model="form.dynamicItem[scope.$index].bankNo"
                    placeholder="请输入收款人账号"
                    type="text"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="name" label="银行" width="200">
                <template slot-scope="scope">
                  <el-select
                    placeholder="请选择"
                    v-model="form.dynamicItem[scope.$index].bankName"
                    filterable
                    style="width: 100%"
                    clearable
                  >
                    <el-option
                      v-for="item in Banks"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="purchasePrice" label="银行支行" width="200">
                <template slot-scope="scope">
                  <el-input
                    v-model="form.dynamicItem[scope.$index].bankBranch"
                    placeholder="请输入银行支行"
                    type="text"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>         

data：

 dynamicItem: [
          {
            bankAcc: "",
            bankNo: "",
            bankName: "中国农业银行",
            bankBranch: "",
          },
        ],

methods：

  
//获取勾选上的行rowIndex下标
tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex;
    },

//增加行功能
  addSupplier() {
      if (this.form.dynamicItem.length >= 10) {
        this.$message({
          type: "warning",
          message: "最多可新增10条!",
        });
      } else {
        this.form.dynamicItem.push({
          bankName: "中国农业银行",
          bankAcc: "",
          bankNo: "",
          bankBranch: "",
        });
      }
    },
//删除选中行功能
 deleteSupplier() {
      var d = this.form.dynamicItem;
      if (d.length <= 1) {
        return this.$message.error("最后一条不允许删除");
      }
      this.$refs.multipleTable.selection.forEach((Ele, index) => {
        for (var i = 0; i < d.length; i++) {
          var t = d[i].row_index;
          if (t == Ele.row_index) {
            d.splice(i, 1);
          }
        }
      });
    },