对iView UI的组件表格翻页回显表格选中内容的实现

再开发一个表格的时候产品要求换页时，前一页选中的状态保留，并且切换页码后，当前页的选中项也需要回显在表格中。同时，每页内容支持全选操作，此状态也需要保留。

使用一个数组存储已选的id，创建一个toggleSelection 函数 传入已选择的id数组selection，和查询出的列表数据list

  // 翻页回显函数
    toggleSelection (selection, list) {
      if (!selection.length || !list.length) return list
      return list.map(item => {
        const index = selection.findIndex(e => { 
          return e === item.id
          })
        if (index > -1) {
          this.$set(item,'_checked', true)
        } else {
          return item
        }
      })
    },

在代码中的使用

<script>
data(){
   list:[],  //请求回来的数据
   selectedIds: [] // 用于记录所有已选择的优惠券ID
},
    // 查询列表
    getList() {
      // ....接口调用 回来·的数据----list
      let arr = [...this.selectedIds]
      console.log(arr);
      if (arr.length != 0) {
        this.toggleSelection(arr,this.tableData)
      }
  },
  // 翻页回显函数
    toggleSelection (selection, list) {
      if (!selection.length || !list.length) return list
      return list.map(item => {
        const index = selection.findIndex(e => { 
          return e === item.id
          })
        if (index > -1) {
          this.$set(item,'_checked', true)
        } else {
          return item
        }
      })
    },
</script>