element-ui table组件翻页后记录之前页面勾选数据

• 翻页后加载的数据，在已选的列表中找出当前10条中已选的用this.$refs.myTable.toggleRowSelection(row, true) 方法触发当前选中的项
• 历史选中的数据：已选择的列表 - 当前页的数据

export default {
    data(){
        return {
            historyChooseList: [],
            currentChooseList: [],
            dataList: [],
            param: {
                pageNum: 1,
                pageSize: 10
            },
            total: 0
        }
    },
    computed: {
        allChooseList() { // 所有选中的数据
          return [...this.currentChooseList, ...this.historyChooseList]
        }
    },
    methods: {
   /*
    * 翻页请求数据后-分出已选的数据和当前页数据已选的
    * */
    setTableSelect() {
      // 查找当前页 已选中的数据
      let rowList = this.dataList.filter(item => this.allChooseList.find(choose => choose.userId === item.userId))
      // 历史选中 = 所有选中 - 当前页选中
      this.historyChooseList = this.allChooseList.filter(item => !~rowList.findIndex(data => data.userId === item.userId));
      this.$nextTick(() => {
        rowList.forEach(row => this.$refs.myTable.toggleRowSelection(row, true))
        this.currentChooseList = rowList
      })
    },
    /*
    * 当前页-多选
    * */
    selectAllHandle(selection) {
      this.currentChooseList = selection
    },
    /*
    * 当前页-单选
    * */
    selectHandle(selection, row) {
      this.currentChooseList = selection
    },
    changePage(val) {
      this.param.pageNum= val
      this.getDataList()
    },
    getDataList() {
      getApi('getUserList', this.param).then(res => {
        if (res.success) {
          this.dataList = res.data
          this.total = res.total
          this.setTableSelect()
        } 
      })
    },
  },
}