效果图

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即可