elementui[el-table]表格全选操作以及翻页选中取消相关效果

elementui的表格默认是没有所有数据选中的操作的，仅仅只是选中当前页的10条或者20条数据，因此我们需要自己手动加入一个全选操作的按钮。以此来将数据全部选中保存。

总体来看无非就是几步操作而已。

第一步操作思路：全选操作

反过来：取消全选操作

思路：

点击全选按钮时候，触发其change事件，然后调用单独列表接口获取所有的列表数据，然后保存在一个数组中，最后调用toggleAllSelection()方法即可全部勾选

反之：将保存的数组重置，然后调用clearSelection()方法取消勾选即可。

第二步操作思路：全选之后，去掉几个勾选内容。然后翻页又去掉几个勾选内容。来回切换翻页，该去掉的内容不在被勾选。

反过来：取消全选之后，勾选当页几个内容，然后翻页又勾选几个内容，来回切换，勾选的内容任然存在。

思路1：

全选之后，去掉几个勾选内容，实际就行调用el-table的@select方法将点击的几个内容从保存的数组(saveCheckList)中一一删掉即可。然后来回翻页取消勾选，实际上就是让翻页获取的新数据(operationList)与保存的数据(saveCheckList)进行对比，如果存在的就勾选上。

反之：勾选内容，实际就行调用el-table的@select方法将点击的几个内容添加到保存的数组(saveCheckList)中，然后来回翻页勾选上，实际上就是让翻页获取的新数据(operationList)与保存的数据(saveCheckList)进行对比，如果存在的就勾选上

注意：选中状态的勾选必须在接口获取数据之后

第三步操作思路：勾选当页全选按钮，然后去掉几个勾选，进行翻页，又勾选当页全选按钮，然后又去掉几个勾选，来回切换状态保持。当页全选按钮只有当前全选和取消两个效果

代码：

<template><div class='xxx-box'><!-- 表格 --><el-table:data="operationList"ref="mListTable"@select="changeSelect"@select-all="selectAll">......</el-table><!-- 分页 --><div class="all-el-page"><div class="all-check"><span class="all-check-span">已选择{{saveCheckList.length }}条数据</span><el-checkbox v-model="pageChecked" @change="checkAll">全选</el-checkbox></div><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryParams.page":page-size="queryParams.size"layout="total, prev, pager, next, jumper":total="total"></el-pagination></div></div></template><script>export default {data(){return{pageChecked:false, //全选切换状态// 保存起来的选择项saveCheckList: [],// 分页queryParams: {page: 1,size: 10,},// 分页总数total:0,}},methods:{// 当页勾选以及取消changeSelect(selection, row) {console.log("selection", selection);console.log("row", row);// 从保存项saveCheckList里面寻找,如果找到了row则删除，如果没找到则添加let fitemIndex = this.saveCheckList.findIndex((item) => {return item.ebIds == row.ebIds;});if (fitemIndex < 0) {this.saveCheckList.push(row);} else {this.saveCheckList.splice(fitemIndex, 1);}console.log("this.saveCheckList", this.saveCheckList);},// 表格全选内容selectAll(val) {console.log("selectAll", val);// 如果为空，则为清除选项状态，此时将table中的所有内容都从saveCheckList移除if (val && val.length == 0) {this.operationList.forEach((row) => {// 从保存项saveCheckList里面寻找,如果找到了row则删除，如果没找到则添加let fitemIndex = this.saveCheckList.findIndex((item) => {return item.ebIds == row.ebIds;});// 找到了就删除掉if (fitemIndex >= 0) {this.saveCheckList.splice(fitemIndex, 1);}});} else if (val && val.length != 0 && this.saveCheckList.length != 0) {// 如果不为空,且this.saveCheckList也不为空则从val里面找val.forEach((row) => {// 从保存项saveCheckList里面寻找,如果找到了row则删除，如果没找到则添加let fitemIndex = this.saveCheckList.findIndex((item) => {return item.ebIds == row.ebIds;});// 没找到就push进去if (fitemIndex < 0) {this.saveCheckList.push(row);}});} else if (val && val.length != 0 && this.saveCheckList.length == 0) {val.forEach((row) => {this.saveCheckList.push(row);});}},// 全选按钮checkAll() {// 全选操作if (this.pageChecked) {// 调用接口查询所有的列表数据并且保存起来let param = {page: 0,size: 1000000,ebId: this.queryParams.ebId,ebActivated: this.queryParams.ebActivated,ebValid: this.queryParams.ebValid,ebBatch: this.queryParams.ebBatch,ebmType: this.queryParams.ebmType,ebModelName: this.queryParams.ebModelName,ebSensorStatus: this.queryParams.ebSensorStatus,ebLeaveStatus: this.queryParams.ebLeaveStatus,};emergencyBaggetList(param).then((response) => {if (response.status == "0") {this.saveCheckList = response.data.content;console.log("this.saveCheckList", this.saveCheckList);// 将当前的页的所有内容加上勾选状态this.$nextTick(() => {this.$refs["mListTable"].clearSelection();this.$refs["mListTable"].toggleAllSelection();});}});} else {// 取消全选，当前所有选择项清空this.saveCheckList = [];// 将当前的页的所有内容取消勾选状态this.$nextTick(() => {this.$refs["mListTable"].clearSelection();});}},// 分页切换时准备表格的选中状态 -- 这个内容必须放在表格数据赋值之后--()// tableList 为当前表格的数据checkPageStatus(tableList) {tableList.forEach((row) => {let findex = this.saveCheckList.findIndex((item) => {return item.ebIds == row.ebIds;});console.log("checkPageStatus", findex);if (findex >= 0) {this.$nextTick(() => {this.$refs["mListTable"].toggleRowSelection(row);});}});},/** 查询列表 */getList() {let param = {page: this.queryParams.page - 1,size: this.queryParams.size};emergencyBaggetList(param).then((response) => {this.operationList = response.data.content;// 准备表格的选中状态this.checkPageStatus(this.operationList);this.total = response.data.totalElements;});},/* 分页 */handleSizeChange(val) {this.queryParams.size = val;this.getList();},/* 分页 */handleCurrentChange(val) {this.queryParams.page = val;this.getList();},}}</script>

效果