iview + vue table 分页记忆

开发过程中，我们时常会用到表格组件，一般翻页由后台实现，当我们需要实现表格多选时，翻页导致数据重新刷新，导致我们之前选择的项无法保存。这里主要记录下iview table 如何实现:
代码如下：

<template>
  <div id="add-edit-wrap">
    <Tabs value="name1">
      <TabPane label="单词列表" name="name1" :disabled="this.albumListObj ? false : true">
        <Button type='primary' icon="minus" @click="delBatches" style="margin-bottom: 20px;">批量删除</Button>
        <Table @on-selection-change="selectionChange" :loading="tableLoading" :columns="tabcol" :data="tabledata" :border="true"></Table>
        <div class="page-wrap" style="margin-top: 20px; text-align: right;">
          <Page
            show-total
            :total="listTotal"
            :page-size="listParams.pageSize"
            :current="listParams.page"
            show-elevator
            @on-change="changePageList"
          ></Page>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
const uniqBy = require("lodash.uniqby")
const remove = require("lodash.remove")
const differenceBy = require("lodash.differenceby")
import { searchAlbum, addAlbum, editAlbum, searchBindAlbumWord, delBindAlbumWord, vocabularyList, bindAlbumWord } from '@/api/spoken'
import { mapState } from 'vuex'
export default {
  name: 'spokenDetail',
  data() {
    return {
      albumDatas: {
        albumName: '',
        albumIntro: ''
      },
      file: null,
      loadingStatus: false,
      upLoadUrl: '',

      imgUrl: '',
      id: null,

      // 单词列表
      tableLoading: false,
      tabcol: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '问题ID',
          key: 'id',
          align: 'center'
        },
        {
          title: '问题',
          key: 'question',
          align: 'center'
        },
        {
          title: '回答',
          key: 'answer',
          align: 'center'
        },
        {
          title: '翻译',
          key: 'translation',
          align: 'center'
        },
        {
          title: '描述',
          key: 'description',
          align: 'center'
        },
        {
            title: '操作',
            align: 'center',
            width: 162,
            render: (h, params) => {
              return h('div', [
                h('i-button', {
                  props: {
                    type: 'text',
                    size: 'large',
                    icon: 'trash-a'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '删除',
                        content: `确定删除该专辑绑定的词汇吗？`,
                        onOk: () => {
                          delBindAlbumWord({bindIds: params.row.bindId}).then(res => {
                            if (res.code === 200) {
                              this.$Message.success('删除成功')
                              this.searchBindAlbumWordList()
                            } else {
                              this.$Message.error(res.msg)
                            }
                          })
                        }
                      })
                    }
                  }
                })
              ])
            }
          }
      ],
      tabledata: [],
      listParams: {
        page: 1,
        pageSize: 10,
        albumId: null
      },
      listTotal: 0,
      selection: [],

      selected: [],
      sureLoading: false
    }
  },
  computed: {
    ...mapState({
      albumListObj: 'albumListObj'
    })
  },
  created() {
    if (this.albumListObj) {
      // 编辑
      this.albumDatas.albumName = this.albumListObj.albumName
      this.albumDatas.albumIntro = this.albumListObj.albumIntro
      this.imgUrl = this.albumListObj.albumUrl
      this.id = this.albumListObj.id

      // 获取该专辑下绑定的单曲
      this.listParams.albumId = this.albumListObj.id
      
      this.searchBindAlbumWordList()

    }
  },
  methods: {
    selectionChange(selection) {
      if (selection.length) {
        this.selection = selection.map((item) => {
          return item.bindId
        })
      } else {
        this.selection = []
      }
    },
    delBatches() {
      if (!this.selection.length) {
        this.$Message.error('请选择需要删除的词汇！')
        return
      }
      this.$Modal.confirm({
        title: '批量删除',
        content: `确定批量删除这些词汇吗？`,
        onOk: () => {
          let params = this.selection.join(',')
          delBindAlbumWord({bindIds: params}).then(res => {
            if (res.code === 200) {
              this.$Message.success('删除成功!')
              this.searchBindAlbumWordList()
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
      })
    },
    changePageList(val) {
      this.listParams.page = val
      this.searchBindAlbumWordList()
    },
    changePage(val) {
      this.searchVocDatas.page = val
      this.getvocabularyList()
    },
    getvocabularyList() {
      this.tableVocLoading = true
      vocabularyList(this.searchVocDatas).then(res => {
        this.tableVocLoading = false
        this.total = res.data.total
        this.tableVocdata = res.data.records
      }).then(res => {
        this.updateChecked()
      })
    },
    // 翻页记忆
    handleCancel(selection, row) {
      //从已选项中去除取消项
      remove(this.selected, n => {
        return n.id === row.id
      });
    },
    handleSelect(selection, row) {
      //添加到已选项
      this.selected.push(row)
    },
    handleSelectAll(selection) {
      //数组合并，有可能用户先选择了某几项，已经被我们push进去，因此数组合并需要去重一下
      this.selected = uniqBy(this.selected.concat(selection), "id")
    },
    handleCancelSelectAll(selection) {
      //从已选项中移除当页数据
      this.selected = differenceBy(this.selected, this.tableVocdata, "id")
    },
    //把源数据加上_checked字段，遍历已选项数据，更新选中状态
    updateChecked() {
      for (var i = 0; i < this.tableVocdata.length; i++) {
        this.tableVocdata[i]._checked = false
        for (var j = 0; j < this.selected.length; j++) {
          if (this.selected[j].id === this.tableVocdata[i].id) {
            this.tableVocdata[i]._checked = true
            this.$refs.selection.objData[i]._isChecked = true
          }
        }
      }
    },
  }
}
</script>

```主要方法为updateChecked，每次获取列表数据时去核对一遍数据， 利用this.$refs.selection.objData[i]._isChecked = true设置选中.