iView Table分页 多选分页选中回显

iView的Table组件

前端在多选时如果点击下一页则丢失了上一页Table的多选数据（由于采用的后端分页，每次翻页会直接刷新为新数据）

定义变量

      loading: false,
      columnsData: [], //表格表头
      talbeData: [], //表格数据
      params: {
        total: 0,
        page: 1,
        limit: 10
      },//请求参数
      selectedData: [],//选中的数据
      defSelectData: [] // 去重数据    

页面实现

<Table border stripe ref="table" :loading="loading" :columns="columnsData" :data="talbeData" @on-select="onSelectAll" @on-select-cancel='onSelectCancel' @on-select-all="onSelectAll" @on-select-all-cancel='onSelectAllCancel'></Table>
<Page :total="params.total" :current="params.page" :page-size="limit" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>

表格点击触发

    // 全选 触发
    onSelectAll(selection) {
      // 去重之前的 选中后合并的数组
      this.defSelectData = [...selection, ...this.defSelectData]
      for (let val of this.defSelectData) {
        if (!this.selectedData.some(item => item.ID === val.ID)) {
          this.selectedData.push(val)
        }
      }
    },
    // 取消选中 时触发
    onSelectCancel(selection, row) {
      let result = this.selectedData.findIndex((el) => {
        return el.ID === row.ID
      })
      this.selectedData.splice(result, 1)
    },
    // 取消全选 触发
    onSelectAllCancel() {
      this.selectedData = this.selectedData.filter(item => {
        return this.talbeData.every(el => {
          return item.ID !== el.ID
        })
      })
    },

点击分页，取到新一页的数据，进行选中回显

    // 获取数据
    getTableData() {
      this.loading = true
      getDepUserList(this.params).then(res => {
        this.loading = false
        let data = res.data
        data.list.forEach(item => {
          //选中数据回显
          this.$set(item, '_checked', this.selectedData.some(el => el.ID === item.ID));
        });
        this.params.total = data.count
        this.talbeData = data.list
      })
    },
    changePage(page) {
      this.params.page = page
      this.getTableData()
    },
    changeSizeMember(size) {
      this.params.limit = size
      this.getTableData()
    },