前端Element多选框的切换页面回显以及各种功能

曾经也冥思苦想，话不多说上干货，希望每个人都搞定需求

<el-table ref="ThechoicEismine" :data="ThechoicEismine" tooltip-effect="dark" style="width: 100%" @selection-change="SelectionChangeEismine($event,false)"   
       @getDataOver="getDataOver">

<el-table-column type="selection" width="55"> </el-table-column>

<el-table-column label="日期" width="120">

<template slot-scope="scope">{{ scope.row.date }}</template>

</el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>

</el-table>

data：

studentrkArr：[]，

studentrk：{}，

studentChangeObj: {},

 ThechoicEismine: {
       
          url: "xxxxxxxxxx",
          payload: {
            pageIndex: 1,
            pageSize: 10,
          },
          columns: [{
              label: "姓名",
              key: "StudentName",
            },
            {
              label: "学员类型",
              key: "StudentType",
            },
            {
              label: "手机号",
              key: "shoujihao",
            },
            {
              label: "剩余积分",
              key: "jifen",
            },

          ],

        },

js   

 watch: {

监听每一行数据变化，最后赋值给一个数组就可以在别的地方用，显示
      studentrk(n, o) {   
        console.log('我的n和o', n, o)
        let arr = [];
        for (let i in n) {
          arr.push(...n[i]);
        };

        console.log('studentrk监听====》', arr);
        this.studentrkArr = arr;
      },

   
    },

methods：{

函数一：SelectionChangeEismine(row, push) {
        let arr = JSON.parse(JSON.stringify(this.studentrk));  //转换一下上面定义的studentrk
        let current = this.$refs.ThechoicEismine.payload.pageIndex;  //拿到页码或者切换了页面存起来这个页码
        arr[current] = row;   
        this.studentrk = arr;   把每一行的数据赋值给了定义的studentrk
        console.log('当前选择项===》', arr, row, this.studentrk);  //分别打出来 
        this.studentChangeObj[current] = [];    // 上面定义以后在这儿为空
        let data = this.$refs.ThechoicEismine.datas;  

        row.forEach(el => {                 
          let index = data.findIndex((item) => {
            return item.CreateTime == el.CreateTime && item.StudentName == el.StudentName
          })    //循环选中的每一行拿到index
          this.studentChangeObj[current].push(index);   //拿到index
        });

  },

函数二：

getDataOver() {
        let e = this.$refs.ThechoicEismine.payload.pageIndex;  //存页码
        let Arr = this.studentChangeObj[e];    

        if (Arr && Arr.length > 0) {
          console.log('当前已选页====>', e, Arr);
          this.$nextTick(() => {
            Arr.forEach(el => {
              const data = this.$refs.ThechoicEismine.datas[el];
              this.$refs.ThechoicEismine.$refs.multipleTable.toggleRowSelection(data);//回显成功
            });
          });
        }
      },

}

最后到这就结束了，就完成了，要想在html页面显示，还得把选中数据存到一个数组里使用，在上面的监听方法里！