Debug-021-el-table实现分页多选的效果（切换分页，仍可以保持前一页的选中效果）

本文主要是介绍Debug-021-el-table实现分页多选的效果（切换分页，仍可以保持前一页的选中效果），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前情提要：

        这个功能实现很久了，但是一直没有留意如何实现，今天想分享一下。具体就是我们展示table数据的时候，表格中的数据多数情况是分页展示，毕竟数据量太多，分页的确是有必要的。那么我们有业务需要给表格第一列添加selection选择的属性，以方便选择每一行的数据做一个批量的动作时，就会存在只能选择当前页码的数据，不能选择其它页面的选项，因为点击分页就重新调接口拿新的表格数据了，这的确是个问题。

 思路：（1）我第一个想到的常规思路是去拿el-table的实例，看上面是否有方法或者变量会存所有选择过的选项，当然，当然如果翻页，我就重复往这里去塞数据，不过这个思路很快被我打消了。因为实例上方法很多，这样效率太低，很快我就还是走了第二条路。

            （2）那就是去element-plus的文档看看，关于这个el-table多选是否有属性支持翻页多选，果然是有的（经验之谈：除非很熟悉的属性方法，否则以后还是先去官网看文档比较快）

elementUI官网的el-table中可以找到，截图如下：

如果是vue3使用element-plus的话，官网的el-table里也有这个属性。（这种优秀的功能一般不会移除）

正如文档所述，这两个属性是要搭配使用才有效果的，这种情况作为前端程序员，我想说真是太妙了，用起来很爽，因为加入没有这些封装好的组件和方法属性，那么前端的工作又会增加很多麻烦。

以下只截取部分代码，那两个属性是必须要配的，其次getRowKeys中获取的id必须是唯一的。

<el-tableref="tableref":data="tableData"header-cell-class-name="header-cell"cell-class-name="row-cell":row-key="getRowKeys":default-sort="{ prop: sortPropsHead, order: 'descending' }"@cell-click="handleCellClickCell"@cell-mouse-enter="handleCellMouseEnter"@select="handleSelectionChange"@select-all="handleSelectionChange"@row-click="handleRowClick"@mouseover.native="clearScroll"@mouseleave.native="createScroll"@sort-change="handleSortChange"><el-table-column v-if="isSelected" type="selection" :reserve-selection="true" :selectable="selectable" /><el-table-column type="index" label="序号" width="60" />// getRowKeys方法中一定要返回的是能确保每一行的唯一id

这篇关于Debug-021-el-table实现分页多选的效果（切换分页，仍可以保持前一页的选中效果）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---