elementui中表格和分页,多选之后,在切换分页时能回显之前选择的数据
在Element UI中,要在切换分页的时候保持多选的回显状态,你需要在数据更新的时候保留已选择的行的ID或者其他标识,并在新的数据加载完毕后重新选中这些行。
以下是一个简单的示例代码:
<template>
<div>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
ref="multipleTable"
@current-change="handleCurrentChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<!-- 其他列 -->
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
multipleSelection: [],
currentPage: 1,
pageSize: 10,
total: 0,
};
},
methods: {
fetchData(page) {
// 模拟请求数据
const data = [];
for (let i = 0; i < this.pageSize; i++) {
data.push({
id: (page - 1) * this.pageSize + i,
// 其他数据
});
}
this.tableData = data;
this.total = 100; // 假设总数据量为100
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleSizeChange(val) {
this.pageSize = val;
this.fetchData(this.currentPage);
},
handleCurrentChange(val) {
this.currentPage = val;
this.fetchData(this.currentPage);
},
restoreSelection() {
this.$nextTick(() => {
this.multipleSelection.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row, true);
});
});
}
},
mounted() {
this.fetchData(1);
},
watch: {
currentPage() {
this.restoreSelection();
}
}
};
</script>
在这个示例中,handleSelectionChange
方法用于记录当前选中的行,handleCurrentChange
方法用于分页变化时重新加载数据,restoreSelection
方法用于在数据加载后重新选中之前记录的行。注意,Element UI的toggleRowSelection
方法用于切换行的选中状态。
此外,你可能需要在fetchData
方法中模拟你的数据请求,并在数据加载完成后调用restoreSelection
方法。这样,当用户切换分页时,之前选中的行会被正确地回显。
评论已关闭