Element ui Table 分页多选
其实分页多选,重点不在于如何进行分页选择,而在于选择后如何对分页内容进行回显。
分页选择
我们先来看一下element ui 中table组件提供的两个属性
row-key 上图说的很清楚,需要与reserve-selection一起使用,那我们接下来再看一下reserve-selection
简单点来说,reserve-selection就是当我们在切换数据时,会保留有之前选中的数据,比如上一页、下一页等。此时需要注意一点的就是:什么时候我们需要保留之前的数据,什么时候不需要,不需要的时候记得清空选中项噢!this.$refs.multipleTable.clearSelection();
我们可以先把每页选中的数据,存储在Map中,key为当前页码。
贴个代码吧!!!
<el-table :data="deviceArr" border stripe ref="multipleTable" @selection-change="handleSelectionChange" :row-key="getRowskey">
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
<el-table-column type="index" label="#"></el-table-column>
<el-table-column label="设备名称" prop="deviceName"></el-table-column>
<el-table-column label="设备类型" prop="deviceType"></el-table-column>
<el-table-column label="指标名称" prop="targetName"></el-table-column>
<el-table-column label="指标类型" prop="targetType"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pageNow"
:page-sizes="[1, 2, 5, 10]"
:page-size="queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<script>
data() {
return {
deviceArr: [], //table数据
queryInfo:{
pageNow :1,
pageSize :10
},
total : 0, // 总记录数
tableChecked : [], // 选中数据
multipleSelectionAll: new Map(), //所有选中的数据包含跨页数据
}
},
methods: {
getRowskey(row) {
// 返回行的唯一标识
return row.targetNo;
},
//多选监听
handleSelectionChange(val) {
this.tableChecked = val;
this.multipleSelectionAll.set(this.queryInfo.pageNow,val);
},
}
</script>
分页选中数据回显
// 获取表格数据
findTargetByTypeAndPage(type) {
api.findTargetByTypeAndPage(this.queryInfo, this.deviceType, this.targetName).then(res => {
if(res.code != 0){
this.$message.error(res.msg)
return;
}
this.deviceArr = res.data.alDevice;
this.total = res.data.totalCount;
this.$nextTick(() => {
// this.component.chartBind.alDeviceManage 是上次选中的数据
// 对当前页进行数据回显
this.component.chartBind.alDeviceManage.forEach(row => {
this.deviceArr.forEach(item => {
if ( row.targetNo == item.targetNo )
this.$refs.multipleTable.toggleRowSelection(item, true);
});
});
// 当前页选中数据存储在Map中
this.multipleSelectionAll.set(this.queryInfo.pageNow, this.tableChecked);
// 将其他页面选中数据存储在Map中
if ( type == 'init') this.findOthertarget();
});
});
},
// 获取其他分页数据
findOthertarget() {
// 总页码
let totalPage = (this.total + this.queryInfo.pageSize -1) / this.queryInfo.pageSize;
for(let i=this.queryInfo.pageNow + 1; i <= totalPage; i++) {
api.findTargetByTypeAndPage({pageNow: i, pageSize: this.queryInfo.pageSize}, this.deviceType, this.targetName).then(res => {
if(res.code == 0){
let datas = [];
this.component.chartBind.alDeviceManage.forEach(row => {
res.data.alDevice.forEach(item => {
if ( row.targetNo == item.targetNo )
datas.push(item);
});
});
this.multipleSelectionAll.set(i, datas);
}
});
}
},
以上就可以了,但这样做还有最大的一个弊端就是会消耗资源,因为初始化数据回显时,要把所有分页内容都获取一遍, 但暂时想不到其他的办法了,不知道还有没有更好的方法呢!如果获取了所有的分页内容的话就不需要设置reserve-selection了。