ElementUI el-table表格动态添加一行、删除一行

效果：

html

     <el-button
        type="success"
        icon="el-icon-plus"
        @click="addtable"
      >
        添加
      </el-button>
      <el-button
        type="warning"
        icon="el-icon-share"
        @click="qingchutable"
      >
        清空
      </el-button>
      <el-button
        type="danger"
        icon="el-icon-delete"
        @click="deltable"
      >
        删除
      </el-button>

      <el-table
        :data="ruleForm.annualBudgetBookDTOList"
        class="table1"
        @selection-change="handleDetailSelectionChange"
        :row-class-name="rowClassName"
        ref="tb"
      >
        <el-table-column
          type="selection"
          width="30"
          align="center"
        />
        <el-table-column
          type="index"
          label="序号"
          width="50"
        > </el-table-column>

        <el-table-column
          label="教材名称"
          width="300"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.bookName"></el-input>
          </template>
        </el-table-column>

        <el-table-column
          label="开本"
          width="200"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.kaiben"
              class="kaiben"
            >
              <el-option
                v-for="item in selectData.kaiben"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          label="计量单位"
          width="150"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.measure"></el-input>
          </template>
        </el-table-column>

        <el-table-column
          label="数量"
          width="150"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.bookQuantity"></el-input>
          </template>
        </el-table-column>

        ......

        <el-table-column
          label="备注"
          width="250"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.remark"></el-input>
          </template>
        </el-table-column>
      </el-table>

data:

ruleForm: {
        annualBudgetBookDTOList: [
          {
            bookName: "",                   //教材名称
            bookPrice: "",                  //单价
            bookQuantity: "",               //教材数量
            concentratedApplication: "",    //集中申请数
            concentratedAudit: "",          //集中审核数
            measure: "",                    //计量单位
            remark: "",                     //备注
            sporadicApplication: "",        //零星申请数量
            sporadicAudit: "",              //零星审核数量
            totalApplication: "",           //合计申请数
            totalAudit: "",                 //合计审核数
            totalUpdate: "",                //合计 审核数量
          }
        ]
      },

      //选中的表数据
      checkedDetail: [],

js

 addtable() {
      if (this.ruleForm.annualBudgetBookDTOList == undefined) {
        this.ruleForm.annualBudgetBookDTOList = new Array();
      }
      let obj = {};
      // obj.bookName = "123",                   //教材名称

      this.ruleForm.annualBudgetBookDTOList.push(obj);
    },
    qingchutable() {
      this.ruleForm.annualBudgetBookDTOList = undefined

    },
    deltable() {
      if (this.checkedDetail.length == 0) {
        this.$alert("请先选择要删除的数据", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        this.ruleForm.annualBudgetBookDTOList.splice(this.checkedDetail[0].index - 1, 1);
      }
    },
    rowClassName({ row, rowIndex }) {
      console.log('row', row);
      console.log('rowIndex', rowIndex);
      row.index = rowIndex + 1;
    },
    handleDetailSelectionChange(selection) {
      if (selection.length > 1) {         //删除一行
        this.$refs.tb.clearSelection();//清空用户的选择
        this.$refs.tb.toggleRowSelection(selection.pop());//切换某一行的选中状态
      } else {
        this.checkedDetail = selection;
      }
    },

参考：ElementUI中的el-table表格实现动态添加一行、删除一行、清空所有行