Element ui 中使用table组件实现分页记忆选中
我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了
示例如下
<el-table :data="tableData" ref="table" @selection-change="handleSelectionChange"> <el-table-column type="selection"></el-table-column> <el-table-column prop="personName" label="客户名称"></el-table-column> <el-table-column prop="telphone" label="手机号"></el-table-column> <el-table-column prop="idNo" label="身份证号"></el-table-column> <el-table-column prop="linkTypes" label="客户身份"></el-table-column> </el-table> <el-pagination :page-size="pagination.pageSize" @current-change="currentChange" :current-page="pagination.pageNumber" :page-sizes="pagination.pageSizes" :total="pagination.totalRows" @size-change='sizeChange'> </el-pagination>
首先定义个data值
data () { return { multipleSelectionAll: [], // 所有选中的数据包含跨页数据
multipleSelection: [], // 当前页选中的数据
idKey: 'personId', // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
tableData: [] // 表格数据
// 此处省略pagination的定义
}
}
方法中定义以下:
methods : {
// 设置选中的方法 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" 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; } } } }) }, currentChange(val){ // 改变页的时候调用一次 this.changePageCoreRecordData();
this.pagination.pageNumber = val;
this.query();
}, sizeChange(val){ // 改变每页显示条数的时候调用一次
this.changePageCoreRecordData();
this.pagination.pageSize = val;
this.query();
},
handleSelectionChange (val) {// 再执行一次记忆勾选数据匹配,目的是为了在当前页操作勾选后直接获取选中数据
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
this.multipleSelection = val;
}, query () { // 分页查询数据方法,在成功返回数据方法里调用setSelectRow方法,使每次分页查询都能勾选中 $.ajax({..., success:(res)=>{
...... setTimeout(()=>{ this.setSelectRow(); }, 200) } }) },
// 得到选中的所有数据
getAllSelectionData () {
this.changePageCoreRecordData();
console.log(this.multipleSelectionAll)
}
}
如果你的是自定义组件dialog弹窗里面的表格选择,如果想每次打开想选中,那么就直接在props加一个值,然后加一个watch
props: [ "selectData"], watch: { 'selectData' (val) { this.multipleSelectionAll = val; } },
上传到了GitHub上一个示例,可供参考
如果你觉得不错,(点我)请我喝杯奶茶吧,O(∩_∩)O~
邮箱:wl131710@gmail.com、543253585@qq.com
★我的故乡江油市简介: 江油市是唐代大诗人李白的故乡,一座风景如画的历史文化名城,也是位于成都经济圈北端的一座正在崛起的新兴工业城市、旅游城市,素有“李白故里,九寨门户,蜀道咽喉,华夏诗城”之称。中国改革开放的总设计师邓小平为江油亲笔题写了“李白故里”四个苍劲有力的大字,近年来,又因著名武术大师海灯法师的影响而成为川北的武术之乡,可谓文武之光,交相辉映。此外,江油城郊的佛爷洞、金光洞均为川北名胜,作为古蜀道的重要通道,沿线古迹甚多。 李白纪念馆位于李白故里的昌明河畔,是一座具有唐代风格的古典园林建筑群,气韵飞动,豪放不羁,馆藏4000多件有关文物。