elementUI中表格分页勾选以及整体的全选功能结合。

<template> <div> <div class="table taskcontent"> <el-table :data="tabledata" style="width:100%" @selection-change='selRow' ref="multipleTable" :row-key="getRowKeys"> <el-table-column type="selection" min-width="55" align="center" :reserve-selection="true"></el-table-column> <el-table-column prop="num" label="编号" min-width="120" align="center"></el-table-column> <el-table-column prop="name" label="任务名称" min-width="300" align="center"></el-table-column> <el-table-column prop="time" label="创建时间" min-width="300" align="center"></el-table-column> </el-table> </div> <el-checkbox label="全选" :indeterminate="isIndeterminate" v-model="checkAll" @change="selAll()" ></el-checkbox> <el-pagination @size-change="handlePageSize" @current-change="handleCurrentPage" :current-page="currentPage" :page-sizes="[3,5]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> <script> export default { data() { return { selectedAssetsList:[], assetsUidList:[], currentPage:1, pageSize:3, total:8, isIndeterminate:false,//对el-checkbox控制不完整的全选状态 checkAll:false,//对el-checkbox控制全选状态 tabledata:[ ], newTabledata: [ //el-table的数据内容 { id:1, num: "201903123345", name: "等级评价", time: "2019-10-10" }, { id:2, num: "201903123346", name: "供应商推荐", time: "2019-10-14" }, { id:3, num: "201903123348", name: "供应商推荐", time: "2019-10-15" }, { id:4, num: "201903123350", name: "我的报告", time: "2019-10-16" }, { id:5, num: "201903123345", name: "等级评价", time: "2019-10-10" }, { id:6, num: "201903123346", name: "供应商推荐", time: "2019-10-14" }, { id:7, num: "201903123348", name: "供应商推荐", time: "2019-10-15" }, { id:8, num: "201903123350", name: "我的报告", time: "2019-10-16" } ] }; }, mounted(){ this.search(); }, methods:{ // 获取row的key值 getRowKeys(row) { return row.id; }, handlePageSize(pageSize){ this.pageSize = pageSize; this.search(); }, handleCurrentPage(currentPage){ this.currentPage = currentPage; this.search(); }, search(){ this.tabledata = this.newTabledata.slice((this.currentPage - 1)*this.pageSize,this.currentPage * this.pageSize); }, //全选按键功能实现 selAll() { if(this.$refs.multipleTable.selection.length < this.newTabledata.length){ this.checkAll=true; }else{ this.checkAll=false; } if(this.checkAll){ this.newTabledata.forEach(row=>{ this.$refs.multipleTable.toggleRowSelection(row,true); }); }else{ this.$refs.multipleTable.clearSelection(); this.selectedAssetsList = []; this.assetsUidList = []; } }, stateChange(){ var vm = this; if(vm.assetsUidList.length < this.newTabledata.length && vm.assetsUidList.length > 0){ this.isIndeterminate = true; } else if(vm.assetsUidList.length == this.newTabledata.length){ this.isIndeterminate = false; this.checkAll = true; } else if(vm.assetsUidList.length == 0){ this.isIndeterminate = false; this.checkAll = false; } }, //表格内checkbox触发的全选按钮状态变化 selRow(val){ const vm = this; // 选择的行的完整数据。 vm.selectedAssetsList = Array.from(new Set([...vm.selectedAssetsList,...val])); const currentArr = val.map(item => item.id); const arr1 = [...vm.assetsUidList, ...currentArr]; vm.assetsUidList = Array.from(new Set(arr1)); const tableData = vm.tabledata.map(item => item.id); const difference = tableData.filter(v => !currentArr.includes(v)); difference.forEach(item => { if (vm.assetsUidList.indexOf(item) !== -1) { vm.assetsUidList.splice(vm.assetsUidList.indexOf(item), 1); } }); // 把选中的行数据进行去重。 var list = vm.selectedAssetsList.filter(item=>vm.assetsUidList.indexOf(item.id)!=-1); for(var i =0;i<list.length;i++){ for(var j=i+1;j<list.length;j++){ if(list[i].id==list[j].id){ list.splice(j,1); j--; } } } setTimeout(()=>{ this.stateChange(); },0) }, } } </script>