vue+element-ui实现分页表格可勾选，翻页后保持所有勾选操作

<template>
  <div>
    <el-table
      :data="tableData"
      v-loading="loading"
      :row-key="rowKey"
      @select="handleSelect"
      @select-all="handleSelectAll"
      @selection-change="handleSelectionChange"
      ref="$table">
      <el-table-column
        type="selection"
        width="50">
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
import {
  // isEqual as _isEqual,
  unionBy as _unionBy,
  intersectionBy as _intersectionBy,
  // cloneDeep as _cloneDeep,
  findIndex as _findIndex,
  remove as _remove,
  fill as _fill
} from 'lodash';

export default {
  props: {
    // 已选的list
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [],
      tableAllData: [],
      // 数据唯一性key
      rowKey: 'id',
      // 多选-已选list
      selList: [],

      loading: false,
      selected: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 用于保存所有选中的数据
      selectedRows: [],
      selectAllList: {}
    }
  },
  created() {
    this.getAllTableData()
  },
  computed: {
    _disabledSubmit() {
      return !this.selList.length;
    },
    _selListLength() {
      return this.selList.length;
    }
  },

  methods: {
    getAllTableData() {
      const data = []
      for (let i = 0; i <= 1000; i++) {
        data.push({
          id: i + 1,
          name: `姓名${i}`,
          age: parseInt(Math.random() * 20 + 20)
        })
      }
      this.tableAllData = data;
      this.tableData = data.slice(0,10)
      this.total = data.length;
    },
    /** 设置表格选中的 */
    setTableSelected() {
      if (!this.tableData || !this.tableData.length) return;
      this.$nextTick(() => {
        this.tableData.forEach(row => {
          const flag =
            _findIndex(this.selList, [this.rowKey, row[this.rowKey]]) >= 0;
          this.$refs['$table'].toggleRowSelection(row, flag);
        });
      });
    },

    /** 多选-选择 */
    handleSelect(selection,val) {
      console.log(selection,val)
      this.setSelList(selection);
    },
    /** 多选-全选 */
    handleSelectAll(selection) {
      this.setSelList(selection);
    },
    /** 多选-设置已选list */
    setSelList(selection) {
      // 1.合并this.selList，并根据this.rowKey去重
      const tempList = _unionBy(this.selList, selection, this.rowKey);
      // 2.得到this.selList和this.list的交集
      const intersectionList = _intersectionBy(
        this.selList,
        this.tableData,
        this.rowKey
      );
      // 3. 找到selection中不存在于intersectionList的子项，并在this.selList中删除该子项
      intersectionList.forEach(row => {
        const flag = _findIndex(selection, [this.rowKey, row[this.rowKey]]) < 0;
        if (flag) {
          _remove(tempList, e => e[this.rowKey] === row[this.rowKey]);
        }
      });
      // 4. 将tempList和this.value比较，优先保留初始选择数据
      this.value.forEach(row => {
        const index = _findIndex(tempList, [this.rowKey, row[this.rowKey]]);
        if (index) {
          // lodash.fill 替换方法
          _fill(tempList, row, index, index + 1);
        }
      });
      // 5. 赋值
      this.selList = tempList;
    },

    handleSelectionChange(val) {
      console.log(val)
      this.selectedRows = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.tableData = this.tableAllData.slice((val - 1) * this.pageSize,(val * this.pageSize))
      this.setTableSelected();
    }
  },
}
</script>