使用el-table实现分页选择功能，并且实现初始分页选中效果

场景

当使用Table做数据展示，并需要多选时，如果数据都在同一页，可以直接使用官方文档里的demo就可以轻松实现。但如果对数据做了分页展示处理，如何实现在多个页面间选择呢？下面是我的处理方式。

思路介绍

该需求难点在于，每一页选择都是独立存在的，切换到下一页当前选择并不会保存，得想办法保留，并且得考虑原有选中的行。

HTML片段

			<el-table
              ref="multipleStationTable"
              :data="bindTableData"
              rowKey="id"
              border
              height="230"
              :stripe="true"
              @selection-change="handleStationSelectionChange"
            >
              <el-table-column type="selection" width="39" align="center" />
              <el-table-column
                prop="code"
                label="编号"
                showOverflowTooltip
              />
              <el-table-column
                prop="name"
                label="名字"
                showOverflowTooltip
              />
            </el-table>

JS部分

	
	data() {
		return [
		 bindTableData: [], //table列表
         selectArray: [],
         bindList: [],
         selectOptions: {},  // 存储每页选择的行数据
         query: {   // 分页参数
          current: 1,
          size: 15,
          total: 0,
         },
		]
	}
       
	// 选择时处理每一页选中数据
	handleStationSelectionChange(val) {
        if (val.length) {
          const valId = val.map((item) => String(item.id));
          this.selectOptions[this.query.current] = valId;
        } else {
          this.selectOptions[this.query.current] = val;
        }
      },

    // 获取每一页选择数据
	confirmStation() {
        let nowBindList = [];
        this.bindTableData.forEach((item) => {
          if (this.bindList.includes(item.id)) {
            nowBindList.push(item.id);
          }
        });
        // 过滤当前列表的工位
        let beforeBindList = _.xor(
          nowBindList.filter((item) => {
            return this.bindList.includes(item);
          }),
          this.bindList,
        );
         // 获取当前列表选择的工位
        for (let key in this.selectOptions) {
          if (this.selectOptions[key].length) {
            this.selectOptions[key].forEach((item) => {
              if (this.bindTableData.indexOf(item) === -1) {
                this.selectArray.push(item);
              }
            });
          }
        }
       let ids = _.cloneDeep(_.concat(beforeBindList, _.uniq(this.selectArray))); //两个数组合并去重获取最新的绑定列表(_.*** 为 lodash.js 方法 )