1.组件库版本：view-design(~4.0.0)

2.需求版本描述

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

3.实现方案

设置数组selectedTableItems来保存选中信息 1.单选操作，通过监听<Table/>组件的@on-select和 @on-select-cancel事件来处理单选，通过当前row在不在selectedTableItems中，来确定是选中操作，还是取消选中操作。 对应处理函数如下：

rowSelect (selection, row) {
  const index = this.selectedTableItems.findIndex(e => e.id === row.id)
  if (index > -1) {
    this.selectedTableItems.splice(index, 1)
  } else {
    this.selectedTableItems.push(row)
  }
},

2.全选操作，通过监听全选相关操作通过箭头组件的 @on-select-all和@on-select-all-cancel事件，将当前页数据直接过滤同步到selectedTableItems中，对当前页数据进行map操作，如果选中数据不为空selection.length !== 0则说明是全选操作，若当前项不在selectedTableItems中，则添加进去；若选中数据为空selection.length === 0,则说明是取消全选操作，对存在selectedTableItems中的项进行删除操作。相关代码如下；

selectAll (selection) {
  const allData = this.table.list
  allData.map(row => {
    const index = this.selectedTableItems.findIndex(e => e.id === row.id)
    if (selection.length && index === -1) {
      this.selectedTableItems.push(row)
    }
    if (!selection.length && index > -1) {
      this.selectedTableItems.splice(index, 1)
    }
  })
},

3.回显数据，当翻页请求列表接口时，我们需要对当前页数据进行与selectedTableItems进行对比，若当前页中数据存在于selectedTableItems中，则设置相应行数据的选中状态， 在当前组件库中，给 data 项设置特殊 key _checked: true 可以默认选中当前项。以此来达到回显的视图更新。

toggleSelection (selection, list) {
  if (!selection.length || !list.length) return list
  return list.map(item => {
    const index = selection.findIndex(e => { return e.id === item.id })
    if (index > -1) {
      return {
        ...item,
        _checked: true
      }
    } else {
      return item
    }
  })
},

4.完整代码

<template>
    <div>
        <div>已选条数：{{selectedTableItems.length}}</div>
        <Table @on-select-all="selectAll" @on-select-all-cancel="selectAll" @on-select="rowSelect" @on-select-cancel="rowSelect"></Table>
    </div>
</template>
<script>
export default {
    data () {
        return {
            selectedTableItems:[]
        }
    },
    methods:{
     selectAll (selection) {
          const allData = this.table.list
          allData.map(row => {
            const index = this.selectedTableItems.findIndex(e => e.id === row.id)
            if (selection.length && index === -1) {
              this.selectedTableItems.push(row)
            }
            if (!selection.length && index > -1) {
              this.selectedTableItems.splice(index, 1)
            }
          })
    },
    rowSelect (selection, row) {
      const index = this.selectedTableItems.findIndex(e => e.id === row.id)
      if (index > -1) {
        this.selectedTableItems.splice(index, 1)
      } else {
        this.selectedTableItems.push(row)
      }
    },
        toggleSelection (selection, list) {
      if (!selection.length || !list.length) return list
      return list.map(item => {
        const index = selection.findIndex(e => { return e.id === item.id })
        if (index > -1) {
          return {
            ...item,
            _checked: true
          }
        } else {
          return item
        }
      })
    }
}

</script>