el-table翻页后保持数据勾选
时间: 2024-02-21 13:56:04 浏览: 46
在使用 Element UI 的 el-table 组件进行翻页时,如果需要保持数据的勾选状态,可以通过以下步骤实现:
1. 在数据源中添加一个字段来保存勾选状态,例如可以在每个数据对象中添加一个名为 `checked` 的属性。
2. 在 el-table 的列定义中,使用 `selection` 类型的列来显示勾选框,并绑定到数据对象的 `checked` 属性上。
3. 在 el-table 的 `@selection-change` 事件中,更新数据对象的 `checked` 属性。
4. 在 el-table 的 `@current-change` 事件中,记录当前页选中的数据对象。
5. 在翻页时,将当前页选中的数据对象保存下来,并在下一页加载完成后重新勾选这些数据。
下面是一个示例代码:
```html
<template>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
@current-change="handleCurrentChange"
ref="table"
>
<el-table-column type="selection"></el-table-column>
<!-- 其他列定义 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [], // 数据源
selectedData: [], // 当前页选中的数据
};
},
methods: {
handleSelectionChange(selection) {
// 更新数据对象的 checked 属性
this.tableData.forEach((item) => {
item.checked = selection.includes(item);
});
},
handleCurrentChange(currentRow) {
// 记录当前页选中的数据
this.selectedData = currentRow.filter((item) => item.checked);
},
// 翻页时重新勾选数据
handlePageChange() {
this.$nextTick(() => {
this.$refs.table.toggleRowSelection(this.selectedData);
});
},
},
watch: {
// 监听翻页事件
currentPage(newPage, oldPage) {
if (newPage !== oldPage) {
this.handlePageChange();
}
},
},
};
</script>
```
这样,当你在 el-table 中进行翻页操作时,勾选的数据将会被保持,并在下一页加载完成后重新勾选。注意,上述代码仅为示例,具体实现可能需要根据你的业务需求进行调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)