不废话别的 直接上代码
最主要的就是 row-key,reserve-selection 配合使用
<template>
<el-table :data="tableData" ref="table" @selection-change="handleSelectionChange" :row-key="getRowKeys">
<el-table-column type="selection" :reserve-selection="true" width="55" />
</el-table>
</template>
<script>
export default {
data(){
return{
tableData:[],
multipleSelection:[]
}
},
mounted(){
// 先将回显的数据请求到在请求列表数据,要不会有问题
this.getSelection();
this.getData();
},
methods:{
getRowKeys(row) {
return row.id;
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 默认选中
handselect(){
this.multipleSelection.forEach(el=>{
this.$refs.table.toggleRowSelection(el)
})
},
getData(){
axios.get("xxx").then(res=>{
this.tableData = res.data;
})
}
getSelection(){
axios.get("xxx").then(res=>{
this.multipleSelection = res.data;
this.handselect()
})
}
}
}
</script>
这样,table切换页码时就不会清空选中的内容,并且回显时也可以默认选中