element-ui中多选表格,配合分页的情况实现数据回显打勾。很常见的需求,element-ui官方实际上也给出了解决方案:
实际上我们就可以用reserve-selection与row-key结合的方式来实现这个需求。
实现
在<el-table>上指定row-key,并在<el-table-column :reserve-selection="true" type="selection">添加属性:reserve-selection为true,即可实现回显.
hasSelected即为所有选择的rows的id数组.
关键代码如下:
<el-table
ref="multipleTable"
:row-key="getRowKeys"
:data="tableData.content"
border
style="width: 100%"
highlight-current-row
@current-change="handleRowChange"
@selection-change="handleSelectionChange"
>
<el-table-column :reserve-selection="true" type="selection" width="50"></el-table-column>
<el-table-column type="index" width="50"></el-table-column>
<el-table-column prop="name" label="姓名(id)" width="180"></el-table-column>
<el-table-column prop="company.companyName" label="单位名称"></el-table-column>
<el-table-column prop="company.companyType" label="单位类型"></el-table-column>
<el-table-column prop="phone" label="联系方式"></el-table-column>
<el-table-column prop="idCard" label="身份证号码"></el-table-column>
<el-table-column prop="enabled.type" label="激活状态"></el-table-column>
</el-table>
<el-footer class="marginTop h40">
<el-pagination
class="pagination-compact"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage+1"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="sizes, total, prev, pager, next, jumper"
:total="tableData.totalElements"
></el-pagination>
</el-footer>
data() {
return {
hasSelected:[],
getRowKeys(row) {
return row.id;
},
};
},
methods: {
handleSelectionChange(rows) {
this.hasSelected = [];
if (rows) {
rows.forEach(row => {
if (row) {
this.hasSelected.push(row.id);
}
});
}
console.log(this.hasSelected);
},
},