vue 2.X +iview4.0 table组件多选分页回显

在写业务的时候难免遇到table多选，翻页后需要回显的功能，以前写react antd 组件是提供一个所有保存rowKeys的数组保存的，自动回显，然后可以自定义key，比如用每条数据的id做key，一般后端给的数据的id都是唯一的，所以没有问题。
但是在写vue的时候发现，不管是element还是iview 都没有提供自定义table数据key的功能，所以做回显自能自己写逻辑，因为最近在用iview 就用iview做例子

on-select 在多选模式下有效，选中某一项时触发 selection：已选项数据 row：刚选择的项数据

on-select-cancel 在多选模式下有效，取消选中某一项时触发 selection：已选项数据
row：取消选择的项数据

需要用到的就是这两个方法，然后加上

通过给 columns 数据设置一项，指定 type: 'selection'，即可自动开启多选功能。
给 data 项设置特殊 key _checked: true 可以默认选中当前项。

下面上代码

<Table
        :columns="tableColumn"
        :data="tableData"
        ref="table"
        @on-select="selectChange"
        @on-select-cancel="selectChangeCancel"
      >
</Table>

// 勾选
 selectChangeOut(el, row) {
      let productData = JSON.parse(JSON.stringify(this.productData))
      productData.push(row)
      this.productData = productData
  
  },
// 取消选择
 selectChangeCancel(el, row) {
      let productData = JSON.parse(JSON.stringify(this.productData))
      let newProductData = productData.filter(item => {
        return item.id != row.id
      })
      this.productData = newProductData
  },

// 回显勾选
    selectedTrue(selects) {
      setTimeout(() => {
        let tableData = JSON.parse(JSON.stringify(this.tableData))
        this.productData.forEach(el => {
          let index = tableData.findIndex(i => {
            return el.id == i.id
          })
          if (index != -1) {
            this.$refs.table.objData[index]._isChecked = true
          }
        })
      }, 0)
    },

在每次分页请求之后调用这个方法就好了，为什么要setTimeout，是因为如果不加，那么这个方法执行会在table数据填充之前 ，找不到able的objData属性。各位有其他更好的回显方法也可以试试
回显方法个人建议，直接放在 请求后端接口的方法里面，比如我个人喜欢用getData做请求接口函数名

// 调接口查询数据
getData: async function() {
      let res = await xxxx()
      this.selectedTrue()
  }

以上

这么写会有一个bug 就是点击全选的时候，数据并不能保存在 this.productData里面，可以自己再写一个全选的，或者用on-selection-change换掉on-select 逻辑就大家自己写了哦