elementUI表格分页多选及回显

1. 效果

2.实现

<el-table ref="multipleTable2" :data='deviceData'
              :header-cell-style="{background:'#eef1f6',color:'#606266'}" style="width: 100%"  @select="userHandleChange" @select-all='selcectAllChange'>
              <el-table-column type="selection" width="55" > </el-table-column>
              <el-table-column prop="deviceId" label="编号">
              </el-table-column>
              <el-table-column prop="deviceAddress" label="位置">
              </el-table-column>
            </el-table>
 <!--分页组件-->
          <div  style="text-align: center;margin-top: 20px;">
            <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
              :current-page="currentPage1" :page-sizes="[3,10, 20, 30, 40, 50, 100]" :page-size="pageSize1"
              layout="total, sizes, prev, pager, next, jumper" :total="total1">
            </el-pagination>
          </div>
        </div>

方法

<script>
  export default {
    data() {
      return {
       deviceData:[],//列表数据
       currentPage1:1,
       pageSize1:3,
       newArr:'',
       downArr : [],
       changeId :[],//选中的所有Id
       selectAdd:[],//当前页所选中的id
      }
    },
    mouted:{
        this.jurisdictionApi()
     },
    methods:{
    //请求列表数据接口
        jurisdictionApi() {
        this.changeId = [2,3,6]; //初始化要回显选中的数组id
        let datas = {
         // keyword: this.form.keyword, //模糊查询
          page: this.currentPage1,
          pageSize: this.pageSize1,
         // id: this.treeId, //维度id
          //roleId: this.updateUserId, //角色id
          //dataPermission: this.form.dataPermission, //0所有权限 1项目维度 2路段维度 3区域维度
        }
        //获取列表接口
        selectDeviceIdByUserId(datas).then(res => {
          this.deviceData = res.data.data;
          this.total1 = res.data.total;
          this.selectAdd = this.changeId.filter(item => this.deviceData.some(ele => ele.id === item)); //拿到当页匹配的设备id
          console.log('已有设备id数组', this.changeId, this.selectAdd);
          //回显选中数据
          this.$nextTick(() => {
            this.deviceData.forEach((item, index) => {
              this.selectAdd.forEach((item1, index1) => {
                if (item.id == item1) {
                  this.$refs.multipleTable2.toggleRowSelection(this.deviceData[index], true);
                }
              })
            })
          });
        }).catch(res => {})
      },
       //当用户手动勾选数据行的 Checkbox 时触发的事件
      userHandleChange(val,row){
        console.log('进1',val,row);
        //如果手动勾选所有设备按钮为选中状态,则初始化按钮,并显示分页
        // 拿到当前页选中的id数组
        if (val != null && val != "") {
          var numbers = "";
          for (let obj of val) {
            // console.log("选中", obj.id);
            if (numbers == "") {
              numbers += obj.id;
            } else {
              numbers += "," + obj.id;
            }
          }
          this.newArr = numbers;
          this.downArr = numbers.split(',');
          //目前选中的数组id
          let changeType = this.downArr.map(Number);
          //要添加的过滤新数据数组
          const _arr1 = changeType.filter(item1 => !this.selectAdd.includes(item1));
         if(_arr1.length>0){//有新元素
           // this.changeId后台返的回显id数组
          //将新数组添加进原数组id
          this.changeId = Array.from(new Set([...this.changeId,..._arr1]));
          this.selectAdd = Array.from(new Set([...this.selectAdd,..._arr1]));
          // console.log('过滤',_arr1,'添加后的原数组id', this.changeId )
         }else{//删除元素操作
          //要删除的数据数组
           const _arr2 = this.selectAdd.filter(item2 => !changeType.includes(item2));
           //将要删除的数组从原数组中删掉
           this.changeId.splice(this.changeId.findIndex(item => item == _arr2),1);
           this.selectAdd.splice(this.selectAdd.findIndex(item => item == _arr2),1);
         }
          console.log('当前选中', changeType, '当前页设备id', this.selectAdd,'原数组id',this.changeId );
        } else {
          this.newArr = '';
          this.downArr = [];
        }
      },
         //全选/取消
      selcectAllChange(val){
        // console.log('全部',val);
        let arr = [];
        //拿到当前页全选的数组id
        val.forEach((item,index)=>{
          arr.push(item.id)
        })
      let arr1 = arr.filter(item1 => !this.selectAdd.includes(item1))
      if(arr1.length>0){//有新元素,往原数组和当前分页选中数组添加
      //原数组数据
      this.changeId = Array.from(new Set([...this.changeId,...arr1]));
      //当前分页数组
      this.selectAdd = Array.from(new Set([...this.selectAdd,...arr1]));
      }else{//删除所有元素操作
      let arr2 = this.selectAdd.filter(item2 => !arr.includes(item2));
      //删除原数组中当前页全选中的所有id
      this.changeId = this.changeId.filter(item=>{
        return !arr2.includes(item)
      })
      //删除当前选中数组中全选中的所有id
      this.selectAdd = this.selectAdd.filter(item=>{
        return !arr2.includes(item)
      })
      }
      console.log('当前选中', arr, '当前页设备id', this.selectAdd,'原数组id',this.changeId,'新元素', arr1);
      },
       //分页
      handleSizeChange1(val) {
        this.pageSize1 = val;
        this.jurisdictionApi();
      },
      handleCurrentChange1(val) {
        this.currentPage1 = val;
        this.jurisdictionApi();
      },
    }
  }
</script>

转发请注明原创噢~~~~
看完记得点个赞哟！！！