Vue Element-ui el-table组件 实现跨分页实现全选和批量操作

Vue Element-ui el-table组件 实现跨分页实现全选和批量操作

这是项目中遇到的问题,项目使用elementui中的el-table标签同时使用了分页功能,工业功能大概思路是前端请求后台表格所用到的所有数据,后台全部返回,前端单独来做分页功能.
如图所示:

遇到问题:点击全选只能选择当前页的数据,切换页码的其他也没有选择,批量删除后也只能删除当前页的数据,并不能删除所有.

HTML部分,我是用的两个表格自带事件,
selection-change:当选择项发生变化时会触发该事件
select-all:当用户手动勾选全选 Checkbox 时触发的事件

JS部分:
监控数据变化,点击页码的时候数据会更新,数据一变化触发watch

data(){
	return{
		tableData:[],//当前页的表格数据
		tableAllData:[],  //后台返回的所有数据
	}
},
watch: {
    // 分页全选-监听数据变化
    tableData: {
      handler (value) {
        if (this.allCheck) {
          this.tableData.forEach(row => {
            if (row) {
              this.$refs.multiTable.toggleRowSelection(row, true)
            }
          });
        }
      },
      deep: true
    },
  },
   methods: {
	 //全选事件
    cli(rows){
      // console.log(rows)
      let _this = this;
      if (!_this.allCheck) {
        // 全选选中时当前页所有数据选中,使用后台所有数据进行遍历.
        _this.tableAllData.forEach(row => {
          if (row) {
            _this.$refs.multiTable.toggleRowSelection(row, true);
          }
        });
        _this.allCheck = true
      } else {
        _this.$refs.multiTable.clearSelection();
        _this.allCheck = false
      }
    },
    //列表勾选发生变化触发事件
    handleSelectionChange(val) {
      this.multipleSelection = this.reduceSame(val);//勾选放在multipleSelection数组中,防止切换页码时,数据重复.
      // console.log(this.multipleSelection)
      // 选中所有选择框时勾选全选按钮
      if (this.multipleSelection.length == this.total) {
        this.allCheck = true;
      }
    },
    // 数组对象去重
    reduceSame(arr) {
      let obj = {};
      return arr.reduce(function (prev, item) {
        obj[item.id] ? "" : (obj[item.id] = 1 && prev.push(item))
        return prev
          ;
      }, []);
    },
}

如果你遇到相同问题,希望对你有帮助.