在Vue中结合ElementUI实现表格初始化时勾选以及在分页切换时保持勾选状态，可以通过以下步骤实现：
- 使用
el-table组件并开启row-key属性，指定唯一键值作为每行数据的key。 - 使用
el-table-column的type="selection"来创建多选框列。 - 使用
:reserve-selection="true"属性来保证在切换分页时保留选中状态。 - 在
data中定义一个数组来保存选中的行数据selectedRows。 - 使用
@selection-change事件来监听选中行的变化，并更新selectedRows数组。
以下是一个简单的示例代码：
<template>
<div>
<el-table
:data="tableData"
row-key="id"
@selection-change="handleSelectionChange"
:reserve-selection="true"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</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: [], // 表格数据
selectedRows: [], // 选中的行
currentPage: 1, // 当前页
pageSize: 10, // 每页显示条数
total: 0, // 总条数
};
},
methods: {
handleSelectionChange(val) {
this.selectedRows = val;
},
handleSizeChange(val) {
this.pageSize = val;
// 分页大小变化时重新加载数据
this.loadData();
},
handleCurrentChange(val) {
this.currentPage = val;
// 分页页码变化时重新加载数据
this.loadData();
},
loadData() {
// 模拟请求数据
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
this.tableData = this.getMockData().slice(start, end);
this.total = this.getMockData().length;
},
getMockData() {
// 模拟数据
const mockData = [];
for (let i = 1; i <= 100; i++) {
mockData.push({
id: i,
date: '2016-05-02',
name: 'John',
address: `No. ${i} Lake Park`,
});
}
return mockData;
},
},
mounted() {
this.loadData();
},
};
</script>
在这个示例中，我们定义了一个loadData方法