<el-table :data="tableData" border ref="multipleTableChannel" @selection-change="selectChannel" style=" 100%"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column type="index" width="50" align="center" label="序号"/> <el-table-column prop="date" align="center" label="商户名称"> </el-table-column> <el-table-column prop="name" align="center" label="联系人"> </el-table-column> <el-table-column prop="address" align="center" label="联系电话"> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" layout="total,prev, pager, next" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
multipleSelectionAll: [], // 所有选中的数据包含跨页数据 multipleSelection: [], // 当前页选中的数据 idKey: 'id', // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
// 设置选中的方法 setSelectRow() { if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) { return; } // 标识当前行的唯一键的名称 let idKey = this.idKey; let selectAllIds = []; let that = this; this.multipleSelectionAll.forEach(row=>{ selectAllIds.push(row[idKey]); }) this.$refs.table.clearSelection(); for(var i = 0; i < this.tableData.length; i++) { if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) { // 设置选中,记住table组件需要使用ref="table" console.log(this.tableData[i]) this.$refs.table.toggleRowSelection(this.tableData[i], true); } } } , // 记忆选择核心方法 changePageCoreRecordData () { // 标识当前行的唯一键的名称 let idKey = this.idKey; let that = this; // 如果总记忆中还没有选择的数据,那么就直接取当前页选中的数据,不需要后面一系列计算 if (this.multipleSelectionAll.length <= 0) { this.multipleSelectionAll = this.multipleSelection; return; } // 总选择里面的key集合 let selectAllIds = []; this.multipleSelectionAll.forEach(row=>{ selectAllIds.push(row[idKey]); }) let selectIds = [] // 获取当前页选中的id this.multipleSelection.forEach(row=>{ selectIds.push(row[idKey]); // 如果总选择里面不包含当前页选中的数据,那么就加入到总选择集合里 if (selectAllIds.indexOf(row[idKey]) < 0) { that.multipleSelectionAll.push(row); } }) let noSelectIds = []; // 得到当前页没有选中的id this.tableData.forEach(row=>{ if (selectIds.indexOf(row[idKey]) < 0) { noSelectIds.push(row[idKey]); } }) noSelectIds.forEach(id=>{ if (selectAllIds.indexOf(id) >= 0) { for(let i = 0; i< that.multipleSelectionAll.length; i ++) { if (that.multipleSelectionAll[i][idKey] == id) { // 如果总选择中有未被选中的,那么就删除这条 that.multipleSelectionAll.splice(i, 1); break; } } } }) console.log(that.multipleSelectionAll) }, handleCurrentChange(val){ // 改变页的时候调用一次 this.page.currentPage = val; this.changePageCoreRecordData(); this.query(); }, handleSelectionChange1 (val) { // table组件选中事件,记得加上@selection-change="handleSelectionChange" this.multipleSelection = val; }, query () { // 分页查询数据方法,在成功返回数据方法里调用setSelectRow方法,使每次分页查询都能勾选中 if(this.page.currentPage==1){ this.tableData=this.tableDatsa }else{ this.tableData=this.datass } setTimeout(()=>{ this.setSelectRow(); }, 200) },