elementui表格的多选框怎么让他点击分页回来以后继续是选中状态

这个需求在写一些b端项目的时候还是比较常见的,要选中多条数据,然后当你选择分页的时候之前选中的状态就不见了,其实这个原理也很简单,就是给el-table标签加上row-key属性,然后值的话就是你每条数据里边的id就可以,然后将多选框上reserve-selection属性设为true就可以,最后就是不管是单选还是全选直接把事件返回的数组赋值就可以了.具体代码如下:

这是html的代码:

<el-table
:data='list'   //这是要渲染的表格的数据,list是一个数组
ref='table'    //这是用来获取表格实例,具体是用来清空选中的多选框
@select='handleSelect'  //这是表格的单选事件
@select-all='handleSelectAll'  //这是表格的多选事件
:row-key='getRowKey'   //这个就是给整个表格加的唯一值,是一个方法
>
   //一定要把这个设为true,要不不生效
   <el-table-column type='selection' :reserve-selection='true'></el-table-column> 
</el-table>

 这是js代码:

methods:{
    //这个方法就是设置id为唯一值
    getRowKey(row){
        return row.id
    },
    //单选事件
    handleSelect(selection){
    this.selectionList=selection    
    //this.selectionList是需要传的数组,如果后端只要id的话,需要你在传参的时候使用map处理一下数据  
    },
    //多选事件
    handleSelectAll(selection){
    this.selectionList=selection      
    },
    handleClose(){
        this.$refs.table.clearSelection()   //这个方法就是清空所有选中的按钮
    }
    
}