在 el-table
中使用多选(selection
)并实现分页回显,需要特别处理选中项的状态以及分页的数据更新。以下是一个示例,展示了如何实现这个功能:
<template>
<div>
<el-table
:data="currentPageData"
:row-key="row => row.id"
border
@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
@current-change="handlePageChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30]"
:page-size="pageSize"
:total="data.length"
layout="sizes, prev, pager, next, jumper"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Bob', age: 28 },
// ... more data
],
currentPage: 1,
pageSize: 10,
selectedRows: [] // 用于存储选中的行数据
};
},
computed: {
currentPageData() {
const startIndex = (this.currentPage - 1) * this.pageSize;
const endIndex = startIndex + this.pageSize;
return this.data.slice(startIndex, endIndex);
}
},
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection;
},
handlePageChange(newPage) {
this.currentPage = newPage;
// 更新选中的行数据,根据 ID 来匹配
this.selectedRows = this.selectedRows.map(row => this.data.find(item => item.id === row.id));
}
}
};
</script>
在这个示例中,我们添加了一个多选列(type="selection"
)到 el-table-column
,并监听 selection-change
事件来更新选中的行数据。
selectedRows
数组用于存储选中的行数据。在 handleSelectionChange
方法中,我们监听多选的变化,并将选中的行数据存储到 selectedRows
中。在 handlePageChange
方法中,我们更新了分页后的选中行数据,确保选中的行在分页切换后也能正确显示。
这样,你就可以在 el-table
中实现多选的分页回显功能。注意,具体的实现可能会因为你的数据结构和业务需求而有所不同,你可以根据需要进行调整。