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>

效果