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

效果：

image.png

html

     
        添加
      
      
        清空
      
      
        删除
      

      
        
         

        
          
        

        
          
        

        
          
        

        
          
        

        ......

        
          
        
      

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表格实现动态添加一行、删除一行、清空所有行