element-ui:el-table分页记录数据

发布时间:2026/5/20 8:46:35

element-ui:el-table分页记录数据 一、需求背景当多选表格操作比较频繁时候一页数据的多选已经不能满足使用那么我们需要记录每一页的数据然后一起提交使用。二、使用组件的情况2.1、设置row-key:row-keygetRowKeysel-editable refmultipleTable classel-table :datatableData height400 :row-keygetRowKeys v-loadingtableLoading :columnsuserManagement selection-changehandleSelectionChange 2.2、row-key的方法getRowKeys(row){ return row.id },2.3、const.js配置{ fixed: left, type: selection, reserve-selection: true // 分页保留数据 },三、不使用组件直接el-table的方式3.1设置row-keyel-table refmultipleTable classel-table :datatableData height400 :row-keygetRowKeys v-loadingtableLoading selection-changehandleSelectionChange 3.2、row-key的方法getRowKeys(row){ return row.id },3.3、reserve-selection配置el-table-column typeselection reserve-selection width55/四、效果第一页选择3条、第二页选择3条打印时共计6条数据数据存储在multipleSelection字段里边需要使用时候直接使用这个字段即可。如需要展示可以直接把这个字段数据展示在列表里边即可。五、参考资料六、欢迎交流指正

相关新闻