表格实现多选
实现表格多选很简单，只需要在表格里加上一列即可，加完之后就会在表格里出现一列白色的四方块按钮，可以多选，也可以单选
<el-table-column
type="selection"
width="55"
align="center"
>
那么，如何获取选中的数据呢，官方文档提供了三种钩子函数，但是一个就可以满足需求了，在表格设置中加上selection-change 这个事件，其功能为：只要选中的数据发生改变，那么就会触发这个函数
<el-table
:data="tableData"
style="width: 100%; margin-top: 10px"
:border="true"
v-loading="loading"
@selection-change="handleSelectionChange"
>
函数具体内容如下：
handleSelectionChange(val) {
// val拿到的是选中行的全部数据，而this.multipleSelection是把val以对象装在数组中
this.multipleSelection = val;
console.log(this.multipleSelection);
// 每次都清空存储的数据，并装入新数据
this.SelectionList = [];
for (const val of this.multipleSelection) {
for (const key in val) {
if (key === "id") {
this.SelectionList.push(val[key]);
}
}
}
// 在遍历之后转换为字符串，因为这里后端要的值只有行id，因此就全部转为字符串后发给后端
this.ROWids = this.SelectionList.toString();
console.log("this.ROWids", this.ROWids);
},
//具体要什么值，需要根据实际开发情况而定，而该函数直接获取到所有选中行的所有数据，就很nics，想要什么就取什么就可以了。
到这里为止，就已经完成了多选以及获取选中的数据
val获取的值，multipleSelection存储的值以及转化之后的ROWids字符串如下：
实现不同页一起选中
之前所做的工作，仅仅只能在当前页进行选中，获取选中的数据，而不能实现换页一起选中，点击下一页之后，之前选中的数据就丢失了。而为了解决这个问题，那么就可以在表格的设置中添加：row-key="id" 属性，以及在多选列中添加 :reserve-selection="true" 即可，其会实现存储功能，让不同页之间也可以实现一起选中
<el-table
:data="tableData"
style="width: 100%; margin-top: 10px"
:border="true"
row-key="id"
v-loading="loading"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
align="center"
:reserve-selection="true"
>
控制表格选中数据清空
截止上一步为止，我们并没有实现通过代码清空选中行的功能，而只能在页面中通过手动的方式去取消之前选中的行；设想，我已经完成了对所选行的操作，例如查询，导出等操作，那么操作完成之后一定会再次请求接口刷新页面，而选中的标志却并没有消失，这就很影响用户体验；
而可以这样进行解决，我们只需要在表格的设置中添加 ref="multipleTable" 然后在想要清空选中数据的回调处（如查询数据结束之后的回调）在通过 this.$refs.multipleTable.clearSelection(); 即可完成清空选中数据的操作，nics！！！
<el-table
:data="tableData"
ref="multipleTable"
style="width: 100%; margin-top: 10px"
:border="true"
row-key="id"
v-loading="loading"
@selection-change="handleSelectionChange"
>
javascript代码
ReturnFace() {
if (this.ROWids == []) {
this.$message({
message: "未选中数据，不予检测！！！",
type: "warning",
});
} else {
let data = {
ids: this.ROWids,
};
this.$confirm("是否进行人脸下发检测?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return ReturnPeopFace(data);
})
.then(() => {
this.getList();
this.msgSuccess("人脸下发检测成功！");
this.$refs.multipleTable.clearSelection();
});
}
},
表格实现一键选中所有数据
截止目前，所做的工作实际上是：可以实现同页、不同页多选；一键选中当前页的所有行；以及在自己想要的回调处清空自前选中的行；
但是，却并没有实现一键选中所有的数据，这是为什么呢？是因为当数据量比较多的时候，数据会进行分页展示，例如有30条数据，每页在初始化时展示10条，第二页甚至第三页数据其实是没有获取的，该策略被称之为是懒加载，可以大大缩短求情时间，提升用户体验。只有点击第二页的时候，才会获取第二页的数据进行展示。所以呢，要想一键选中所有页的数据，还需要做一些特殊的骚操作才行。
（持续更新中…）
