Thoughts on Realization

Put all the checked data IDS into an array (selectIdAll). After each page turn to get the data of the current page (tableData), the two are compared. If the IDs of some data in tableData are equal to those in selectIdAll, then add an attribute _check=true to the same data in tableData. Unequal settings _check=false.

The method of using vue-easytable

When manipulating multiple checkboxes, vue-easytable provides three events, namely:
We can use select-all and select-change.

Detailed steps (ideas)

Combined with the method provided by vue-easytable, there are three more important steps + 1

1. When a selection is made one by one, the array of all selected items (i.e. selectIdAll) is looped to determine whether there is a current item in the array, splice or push if there is no current item in the array.
2. When selecting all, find the different data of the current page and all selected items, cycle these data, let each data go through the method in Step 1, add these data to selectIdAll;
3. When all cancellations occur, find the same data for the current page and all selected items, cycle through the data, and each item goes through step 1 to remove the data.
4. Each time the data of the current page is loaded, the data of the current page is compared with that of selectIdAll, and the attributes _checked = true are added, and no _checked = false are added.

Code for important steps

1. Single election

    // Single election
    selectSingleChange(selection,rowData) {
      this.compareCheckedData(id, this.selectIdAll);
    },

1. All election

  selectTableData(selection) {
      if (selection.length > 0) {
        // All options
        let arr1 = this.getArrDifference(this.tableDataid, this.selectIdAll);
        arr1.forEach(item => {
            this.compareCheckedData(item, this.selectIdAll)
        })
    } else {
        // Cancellation of full elections
        let arr2 = this.getArrEqual(this.tableDataid, this.selectIdAll);
        arr2.forEach(item => {
            this.compareCheckedData(item, this.selectIdAll)
        })
   	 }
    },

1. Processing the data of the current page after loading the data

this.tableData.map((tableitem, index) => {
    tableitem._checked = false; //Set all States to uncheck first
    this.selectIdAll.map((smallitem, index1) => { //Re-judgement of the state with the same item is checking
           if (tableitem.assetsid == smallitem) {
                tableitem._checked = true;
            }
    })
    return tableitem;
})

1. Public Method 1, delete if you have, add if you haven't.

    compareCheckedData(id, arr) {
      var data_index = arr.indexOf(id);
      if (data_index > -1) {
        arr.splice(data_index, 1);
      } else {
        arr.push(assetsid);
      }
      return arr
    },

1. Common method 2, comparing two arrays to extract the values that exist in arr1 in arr 2 (ordinary arrays, not object arrays)

    // Compare the same values
    getArrEqual(arr1, arr2) {
      let newArr = [];
      for (let i = 0; i < arr2.length; i++) {
        for (let j = 0; j < arr1.length; j++) {
          if (arr1[j] === arr2[i]) {
            newArr.push(arr1[j]);
          }
        }
      }
      return newArr;
    },

1. Common method 3, two arrays compare values that do not exist in arr1 in arr2 (ordinary arrays, not object arrays)

 getArrDifference(arr1, arr2) {
      let newArr = [];
      if (arr2.length == 0) {
        return arr1
      } else {
        for (let i = 0; i < arr1.length; i++) {
          if (arr2.indexOf(arr1[i]) < 0) {
            newArr.push(arr1[i])
          }
        }
      }
      return newArr;
    },

supplement

The final result of these processes is an array of the selected item id. But the other logic of my page business is an array of objects that need these ids.
In order to get the array of this object, I use three methods to share:

1. From the very beginning, such as compareCheckedData, we can change the method from passing in id to passing in object directly, but we will find that there is a big difference between object array and ordinary array, or that some methods of ordinary array have no object array, even if they have poor compatibility, such as indexOf in object array. findIndex can be used, but it is not compatible below ie11. I tried a lot, and eventually I gave up.
2. With the help of the background, I passed him all the id s, and he returned to me the array of objects corresponding to those IDS (the low est way).
3. Each page of data is loaded and added into an array tablePageAll. SelectIdAll is monitored in watch, data is duplicated, tablePageAll array and selectIdAll are looped, and if item. id= id, push into an empty array. reduce() is great for object array de-duplication. Recommended use

watch:{
	selectIdAll(n) {
        let obj = {};
        let newArr = [];
        //tableDataClickAllPage All arrays of data loaded for clicking on different pages
        this.tableDataClickAllPage = this.tableDataClickAllPage.reduce((cur, next) => {
          obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
          return cur;
        }, []) //Set the cur default type to an array with an initial value of empty
        for(let i =0;i<this.tableDataClickAllPage.length;i++){
          let wrap = this.tableDataClickAllPage[i];
          for(let j =0;j<n.length;j++){
              let inner = n[j];
              if(wrap.id == inner){
                newArr.push(wrap);
              }
          }
        }
        this.selectDataAll = newArr;
      }
}