在开发过程中,经常有批量操作的需要,有时候需要翻页多选,或者回显已选择状态。
<el-table v-loading="loading" :data="list" :row-key="(row) => row.id" ref='multipleTable' @selection-change="handleSelectionChange">
<el-table-column type="selection" :reserve-selection="true" width="100"></el-table-column>
<el-table-column prop="date" align="center" label="商品信息">
<template slot-scope="scope">
<p>{{scope.row.name}}</p>
</template>
</el-table-column>
<el-table-column prop="date" align="center" label="商品分类">热门图书</el-table-column>
</el-table>
:row-key="(row) => row.id"是唯一标识,
handleSelectionChange方法监听选中的数据
:reserve-selection="true"放在type="selection"中,是回显数据的必要条件
handleSelectionChange(row){
console.log(row);//row就是你当前选中的数据,你可以根据需要获取id或者需要的参数,进行后续操作
}
this.selectionKeys.forEach(key => {
this.list.forEach(row => {
if (row.id== key.id) {
this.$refs.multipleTable.toggleRowSelection(row, true);
}
})
})
selectionKeys是你获取到的需要回显的数据,
list是你获取到的table的数据,当两个列表的id相等时,即可在ref中multipleTable回显。根据以上代码,即可回显数据,翻页也不会失效