Iview 分页多选提交数据

问题

因为点击切换表格页之后. 表格多选单选的内容会被清空. 第一次做也没有什么好的解决方法, 在网上看了很多方法觉得比较复杂.于是自己开始动手实现这个功能呢.

思路

1.首先将每次勾选的数据缓存到本地;
2.其次因为数据是分页查询出来的. 所以加载页面完成之后默认查询的是第一页的数据. 当表格切换到下一页之后 或者返回到了上一页, 也知道是查询的那一页数据. 监听查询回来的数据.当数据发生变化之后 去遍历查询回来的数据 以及本地缓存的数据. 找到相同的数据勾选上;

tableSelctRow(selection, row) {
      this.$set(this.rowSelectionPage, this.query.pageIndex, selection);
},
tableSelectAll(selection) {
      this.$set(this.rowSelectionPage, this.query.pageIndex, selection);
},
tableSelectChange(selection) {
      his.$set(this.rowSelectionPage, this.query.pageIndex, selection);
}

watch: {
    list() {
      const pageIndex = this.query.pageIndex;
      //遍历 this.list 遍历 this.rowSelectionPage[pageIndex] 如若有相同的id 则选中
      this.list.forEach(item => {
        if (this.rowSelectionPage[pageIndex]) {
          this.rowSelectionPage[pageIndex].forEach(item2 => {
            if (item.id == item2.id) {
              item['_checked'] = true;
            }
          })
        }
      })
    }
  },