ElementUI (el-table )添加、删除行，清空表格

效果图

Step1: 创建表格

用el-table创建表格，绑定data中数据

<el-table
          ref="multipleTable"
          :data="tableData" 
          tooltip-effect="dark"
          stripe
          class="man-table"
          style="width: 100%"
          @selection-change="handleDetailSelectionChange"
      >

data中：

data() {
    return {
      //选择框
      checkedDetail:[],
      // 表格数据
      tableData: [
        {
          id: "01",
          Type: "类型一",
          Time: "17：23",
          Info: "越界",
          Location: "lng: 161.32 ,  lat: 39.34",
          Workers: "王五",
          State: "处理中"
        },
        {
          id: "02",
          Type: "类型二",
          Time: "17：26",
          Info: "越界",
          Location: "lng: 161.34 , lat: 39.44",
          Workers: "李四",
          State: "处理完成"
        }
      ],
 }

@selection-change为勾选框改变事件，在选择勾选框时触发。

//单选框选中数据
    handleDetailSelectionChange(selection) {
      //如果缓存中已有数据，则清空
      if (selection.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(selection.pop());
      } else {
        //将选中行存入缓存中
        this.checkedDetail = selection;
      }
    },

section本来是多选时选中项的数组，通过 this.$refs.multipleTable获取到这个el-table，提前需要给这个el-table设置

ref=“multipleTable”

需要提前声明checkedDetail

//选择框
checkedDetail:[]

添加行

<el-button 
     class="add-btn" 
     @click="handleAddDetails"
>添加</el-button>

methods中：

handleAddDetails() {
	  //如果数据为空，则重置
      if (this.tableData == undefined) {
        this.tableData = new Array();
      }
      let obj = {};
          obj.id:"03",
          obj.Type: "类型四",
          obj.Time "13：54",
          obj.Info: "越界",
          obj.Location: "lng: 161.32 , lat: 39.34",
          obj.Workers: "秦六",
          obj.State: "处理中"
         
      //push进this.tableData中
      this.tableData.push(obj);
    },

删除行

<el-button
     class="del-btn"
     icon="iconfont icon-shanchu"
     @click="handleDelete(scope.$index)"
></el-button>

methods中：

// 删除单个行
    handleDelete(index) {
      //console.log(this.tableData[index]);
      if (this.checkedDetail.length == 0) {
        this.$alert("请先选择要删除的数据", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        this.tableData.splice(index, 1);
      }
    },

勾选后，勾选的内容存储到了checkedDetail中
所以在删除前判断是否选中了一行就可以通过判断其长度即可。

然后，首先判断是否选择了行，如果未选择行，则会给出提示，随后将此条数据在数据源中去掉即可实现删除一行。

splice方法是表示从第一个索引参数开始，删除第二个参数个元素。

清空表格

<el-button 
     class="del-btn" 
     icon="el-icon-delete" 
     @click="Clear"
>清空</el-button>

methods中：

//清空List
    Clear(){
      this.tableData=undefined;
    }

清空List很简单，将tableData设为undefined即可