vue + element ui 中 切换分页时保存 checkbox 的选中状态

1.问题描述：

角色管理页面，跟当前角色分配用户，我遇到的问题就是当用户量很大，几千几万个甚至更多，点击角色管理，大量的用户不得不用分页显示，但当我在第一页选中几个用户，切换到第二页时再选中几个用户，再切换第一页时，之前选中的丢失了。

2.问题解决思路：

首先我先梳理一下角色管理功能实现的逻辑： 点击角色管理=> 弹出所有用户列表并且显示当前角色本身拥有的用户（tree 中使用show-checkbox）=>可以取消和选中用户进行分配=> 最后点击确认按钮。

我们所要做的就是用一个变量来保存我们所选中或者取消的数据，这样无论切换分页还是全局搜索某个用户来进行选中，都不会丢失，另外我们声明的这个变量要先拿到当前角色本身拥有所有用户的数据，然后在 check-change 事件中操作我们要选中或取消的数据

3.代码实现：

第一步 使用element ui 提供的 @check-change 事件

  <el-tree
                                :data="userManagementList"
                                :props="treeProps"
                                show-checkbox
                                node-key="id"
                                :default-checked-keys="roleUserDefaultList"
                                ref="treeRef"
                                :destroy-on-close="true"
                                @check-change="handleCheckChange"
                            ></el-tree>
复制代码

第二步 声明一个新的变量用来保存数据并且拿到当前角色本身拥有哪些用户

 data(){
 return{
     saveCheckedData:[],   // 实时保存复选框的 id
       }
  }    
       
 
  this.roleUserDefaultList = data.result.map((item) => item.id);
                data.result.forEach(item => {
                    this.saveCheckedData.push(item);
                });
 注释： roleUserDefaultList  就是当前角色本身拥有哪些用户，因为选中状态的显示是根据 id 来进行显示的，所以需要操作一下。
复制代码

第三步 保存数据

// 当分页时或者搜索用户时保存选中状态
        handleCheckChange(data, checked) {
            if(checked){
                // data => 每一次选中或者取消的数据
                this.saveCheckedData.push(data);
            }else{
                this.saveCheckedData = this.saveCheckedData.filter(item => {
                    return item.id !== data.id;
                });
            }
            this.roleUserDefaultList = this.saveCheckedData.map(item => item.id);
        },
复制代码