element表格，后端分页时，实现分页多选功能。

element表格，后端分页时，实现分页多选并记忆选项功能。

现在当前端数据量大的时候，一般表格的分页都是由后端类做。每次请求后端都只返回当前页的数据，element表格官方的多选例子，没办法实现分页多选，返回上一页时还要把之前选择的选项勾选的功能。下面类解决这个问题。

基本思路

1. 创建一个数组，使它每项为一页所选择的选择项数据数组。选择项改变时，去更新对应项的数组。例如：

data:(){
	return{ 
		selectionArr:[
			[{id:1},{id:2},{id:4}], //第一页所选择的数组
			
			[{id:6},{id:7}], //第二页所选择的数组
			
			[{id:11},{id:12},{id:13}], //第三页所选择的数组
			//...
		],
		page :1, //当前页码。
},

methods: {
//@selection-change 事件函数
    handleSelectionChange(selection) {
      this.selectionArr[this.page - 1] = selection;
    },
}

2. 切换页码后，等数据加载完，查找selectionArr中当前页有无被选中的选择项数据。如果有，将数据勾选上。

3. 注意事项
   （1） 使用 toggleRowSelection事件函数时，参数必须是原数据。

var tableDate= [
{id:1}
]
//正确示例
this.$refs.table.toggleRowSelection(tableDate[0]);

//错误示例
this.$refs.table.toggleRowSelection({id:1});

（2）不要使用@selection-change 事件，因为当使用toggleRowSelection事件勾选选择项时会触发@selection-change 事件，重复触发。使用**@select-all+@select** 事件，这两个事件为当用户手动勾选数据行或全选的 Checkbox 时触发的事件，使用toggleRowSelection事件不会被触发。

完整代码

<template>
  <div>
    <el-table
      :data="tableDate"
      ref="table"
      @select="handleSelectionChange"
      @select-all="handleSelectionChange"
    >
    
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column prop="name" label="名称" ></el-table-column>
      
    </el-table>
    
    <el-pagination
      @size-change="handleChangePagination"
      @current-change="handleChangePagination"
      :current-page.sync="paginationData.page"
      :page-sizes="[2, 5, 10, 20, 50]"
      :page-size="paginationData.page_size"
      layout="total,sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>

export default {
  data() {
    return {
    tableDate:[],
    total:0,
      paginationData: {
        page: 1,
        page_size: 2,
      },
      arrSelection: [],
    };
  },


  methods: {
    handleSelectionChange(selection) {
      this.arrSelection[this.filterData.page - 1] = selection;
    },
    SaveTheSelectionResult() {
      if (this.arrSelection[this.filterData.page - 1]) {
        this.arrSelection[this.filterData.page - 1].forEach((value) => {
          this.tableDate.forEach((val, index) => {
            if (value.id === val.id) {
              this.$refs.table.toggleRowSelection(this.tableDate[index], true);
            }
          });
        });
       
      }
    },
    handleChangePagination() {
      this.$http.get('你自己的网址').then((response)=>{
          this.tableDate = response.data.tableDate;
          this.total = response.data.total;
          this.SaveTheSelectionResult()
    })
    },
  },
  mounted() {
	this.handleChangePagination() 
  },
};
</script>

有更好的方法或有问题可以留言。