选中 第一页的一条数据时,点到第二页,数据就刷新了,第一页选的选项也就没有保存了,所以就只能永远选择一页内的数据,为了解决该问题,实现保存之前勾选的记录,需要配置如下:
<el-table
ref="multipleTable1"
:data="tableData4"
tooltip-effect="dark"
style="width: 100%;cursor: pointer;"
:row-key="getRowKeys"
@selection-change="handleSelectionChange1"
@row-click="clickRow1">
<el-table-column
type="selection"
width="55"
:reserve-selection="true">
</el-table-column>
</el-table>
<div style="display: inline-flex;flex-direction: row;justify-content: flex-end;width: 100%;">
<el-pagination
@size-change="handleSizeChangeTask"
@current-change="handleCurrentChangeTask"
:current-page="pageTask"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSizeTask"
:total=totalTask>
</el-pagination>
</div>
Tips:
用 element-ui table 里这个参数:
(1)reserve-selection -->仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key)
(2)配合row-key -->行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能的情况下,该属性是必填的。类型为 String 时,支持多层访问:user.info.id
,但不支持 user.info[0].id
,此种情况请使用 Function
。
data(){
return{
// 获取row的key值,其中row.id为每行记录的唯一标识
getRowKeys(row) {
return row.id
}
}
}