场景描述:
element-ui的table表格数据有提供多选框的功能,只要在表格列中多加一列就可以选择表格的数据。但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页的数据的选中状态就没有了。
解决办法:
element-ui提供了reserve-selection,它仅对 type=selection 的列有效,类型为 Boolean,为 true时会在数据更新之后记住之前选择的数据。(需要指定row-key)
代码如下:
<el-table
:data="tableData"
:row-key="getRowKey"
ref="dataTable"
@selection-change="handleSelectionChange"
border>
<el-table-column
type="selection"
:reserve-selection="true">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="phone"
label="手机号">
</el-table-column>
</el-table>
methods: {
// 指定一个key标识这一行的数据
getRowKey (row) {
return row.id
},
// val表示选中的表格行数据
handleSelectionChange (val) {
console.log(val)
},
}