開發(fā)過程中，我們時常會用到表格組件，一般翻頁由后臺實現(xiàn)，當我們需要實現(xiàn)表格多選時，翻頁導致數(shù)據(jù)重新刷新，導致我們之前選擇的項無法保存。這里主要記錄下iview table 如何實現(xiàn):
代碼如下：

<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) {
      //數(shù)組合并，有可能用戶先選擇了某幾項，已經(jīng)被我們push進去，因此數(shù)組合并需要去重一下
      this.selected = uniqBy(this.selected.concat(selection), "id")
    },
    handleCancelSelectAll(selection) {
      //從已選項中移除當頁數(shù)據(jù)
      this.selected = differenceBy(this.selected, this.tableVocdata, "id")
    },
    //把源數(shù)據(jù)加上_checked字段，遍歷已選項數(shù)據(jù)，更新選中狀態(tài)
    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，每次獲取列表數(shù)據(jù)時去核對一遍數(shù)據(jù)， 利用this.$refs.selection.objData[i]._isChecked = true設(shè)置選中.