对于
ElementUI 表格的
多选分页回显，可以通过以下步骤实现：
1. 在父组件中定义一个数组 selectedRows，用于存储所有
选中的
行数据。
2. 在
表格组件中添加一个 @selection-change 事件监听器，每当
选中行数据发生变化时，将最新的
选中行数据更新到 selectedRows 数组中。
3. 在
表格组件中添加一个 :row-key 属性，用于指定
表格行数据的唯一标识符。
4. 在
表格组件中添加一个 :highlight-current-row="true" 属性，用于高亮当前
行。
5. 在
表格组件中添加一个 :default-selection 属性，用于设置
表格初始化时默认
选中的
行数据。
6. 在
分页组件中添加一个 @size-change 事件监听器，每当
分页大小发生变化时，将当前页
选中的
行数据更新到 selectedRows 数组中。
7. 在
分页组件中添加一个 :current-change 属性，用于设置当前页数发生变化时的回调函数。
8. 在回调函数中，根据当前页数和每页显示的
行数，计算出当前页的
行数据在 selectedRows 数组中的下标范围，并将对应的
行数据设置为
表格的默认
选中行数据。
9. 在
表格组件中添加一个 :selection 属性，用于设置
表格的
选中行数据，这里可以直接将 selectedRows 数组传递给该属性即可。
具体代码实现可以参考以下示例：
```html
<template>
<div>
<el-
table
:data="
tableData"
:row-key="row => row.id"
:highlight-current-row="true"
:default-selection="defaultSelection"
:selection="selectedRows"
@selection-change="handleSelectionChange"
>
<el-
table-column type="selection"></el-
table-column>
<el-
table-column prop="id" label="ID"></el-
table-column>
<el-
table-column prop="name" label="Name"></el-
table-column>
<el-
table-column prop="age" label="Age"></el-
table-column>
</el-
table>
<el-pagination
:total="total"
:page-size="pageSize"
:current-page="currentPage"
@size-change="handleSizeChange"
:current-change="handleCurrentChange"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
selectedRows: [],
defaultSelection: [],
total: 0,
pageSize: 10,
currentPage: 1
};
},
mounted() {
// 初始化
表格数据
this.get
TableData();
},
methods: {
get
TableData() {
// 获取
表格数据
// ...
},
handleSelectionChange(selectedRows) {
// 更新
选中行数据
this.selectedRows = selectedRows;
},
handleSizeChange(pageSize) {
//
分页大小发生变化时更新
选中行数据
this.updateSelectedRows();
},
handleCurrentChange(currentPage) {
// 当前页数发生变化时更新
选中行数据
this.currentPage = currentPage;
this.updateSelectedRows();
},
updateSelectedRows() {
// 计算当前页的
选中行数据在 selectedRows 数组中的下标范围
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
// 将对应的
行数据设置为
表格的默认
选中行数据
this.defaultSelection = this.selectedRows.slice(start, end);
}
}
};
</script>
```
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
