需求:点击第一页选中三条数据,点击第二页选中1条,再点击第一页显示选中的三条…
template
@selection-change="selectionTableDtaChange"是勾选会触发的事件
:row-key="getRowKeys是跨页多选row-key"
type="selection"设置为:reserve-selection="true"
<el-table ref="elderTable" :data="elderData" style="width:100%" v-loading="loading" @selection-change="selectionTableDtaChange" :row-key="getRowKeys">
<el-table-column type="selection" align="center" width="40" :reserve-selection="true"></el-table-column>
</el-table>
data数据
secltableData:[],//回显(所有选中状态)
secltId: [], //所有选中id
elderData: [],//表格数据
methods方法
//记录翻页选中
getRowKeys(row) {
return row.elderId
},
// 选择的表单(对选中数据处理,需要处理数据,用于传递给后台)
selectionTableDtaChange (selection) {
this.secltableData = selection
// 去重获取被选中的id值存入到数组中
this.secltId = []
for (let selectedItem of selection) {
this.secltId.push(selectedItem.elderId)
}
},
//回显
showSeclectRow () {
if (this.secltableData.length > 0) {
this.secltableData.forEach(row => {
this.elderData.forEach((item) => {
if (row.elderId === item.elderId) {
this.$refs.elderTable.toggleRowSelection(item, true)
}
})
})
}
},
// 翻页数据更新需要渲染记录id(回显)
list (data, page) {
// 把子组件查询到的结果赋值给elderData,用于table显示数据
this.elderData = data
// 初始化用户选择的表格数据
this.$nextTick(_ => {
this.showSeclectRow()
})
},