1. Problem Description:

Role management page, with the current user role assignment, my problem is when users is large, thousands of tens of thousands of even more, click on the role of management, a large number of users have paged, but when I’m on the first page select several users, selected a few users again when switching to the second page, switch to the first page, before the selected had been lost.

2. Solutions:

First of all, I will sort out the logic of the role management function: Click Role management => the list of all users will pop up and the users that the current role has will be displayed (using show-checkbox in tree) => You can cancel and select users to assign => Finally click ok.

All we need to do is to use a variable to hold the data that we selected or unselected, so that we don’t lose it whether we switch pages or search globally for a user to select, and the variable we declare first takes the data that the current role has for all users, We then manipulate the data we want to check or cancel in the check-change event

3. Code implementation:

The first step is to use the @check-change event provided by Element UI

  <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>
Copy the code

The second step is to declare a new variable to hold the data and find out which users the current role has

 data(){
 return{
     saveCheckedData: [].// Save the id of the check box in real time}}this.roleUserDefaultList = data.result.map((item) = > item.id);
                data.result.forEach(item= > {
                    this.saveCheckedData.push(item); }); Note: roleUserDefaultList is the current user status of the role, because the selected status is displayed by ID, so it needs to be manipulated.Copy the code

Step 3 Save the data

// Save the selected state when paging or searching for users
        handleCheckChange(data, checked) {
            if(checked){
                // data => Data selected or cancelled each time
                this.saveCheckedData.push(data);
            }else{
                this.saveCheckedData = this.saveCheckedData.filter(item= > {
                    returnitem.id ! == data.id; }); }this.roleUserDefaultList = this.saveCheckedData.map(item= > item.id);
        },
Copy the code