[转]el-table表格翻页后仍记忆所选项

大佬博客

el-table多选，对于当前页的多选我们是很容易知道并显示给用户的，但是对于分页后要记住哪些页多选了哪些数据，并正确的显示给用户就有点小挑战了。具体实现：第一种，搬运工在此?，来自于大佬的文章详戳?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<body><div id="app"><el-tableref="multipleTable":data="tableData"@select="handleSelect"@select-all="handleSelectAll"><el-table-column type="selection" width="55"></el-table-column><el-table-column label="索引" width="120" prop="index"></el-table-column></el-table><el-paginationlayout="prev, pager, next":page-size="10":total="total"@current-change="handleCurrentChange"></el-pagination></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data: {checkData: [],tableData: [],total: 11,},methods: {/** * 获取分页数据* 如果该页存在选中的数据，则选中*/addDataItem(val, len) {this.tableData = Array.from({length: len}, (v, i) => v = {index: i,id: `${val}${i}`,});if (this.checkData.length) {this.toggleSelection(this.checkData);}},handleCurrentChange(page) {if (page === 1) {this.addDataItem(1, 10);} else {this.addDataItem(2, 1);}},/** * 单选*/ handleSelect(selection, row) {let allRows = selection.filter((item) => !!item);if (allRows.find(item => item.id === row.id)) {this.addRows([row]);} else {this.removeRows([row]);}},/** * 全选*/ handleSelectAll(selection) {if (selection.length > 1) {this.addRows(this.tableData);} else {this.removeRows(this.tableData);}},addRows(rows) {for (const key of rows) {if (!this.checkData.find((item) => item.id === key.id)) {this.checkData.push(key);}}},removeRows(rows) {if (this.checkData.length > 0) {for (const key of rows) {this.checkData = this.checkData.filter((item) => item.id !== key.id);}}},toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$nextTick(() => {const checked = this.tableData.find(tableRow => tableRow.id === row.id);this.$refs.multipleTable.toggleRowSelection(checked, true);});});} else {this.$refs.multipleTable.toggleRowSelection(this.tableData, false);this.removeRows(this.tableData);}}},created() {this.addDataItem(1, 10);},});</script>
</body>
</html>

第二种，翻看element-ui官方文档，原来已经有实现的方法了，非常简单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<body><div id="app"><el-tableref="multipleTable1":data="tableData"@selection-change="handleSelectionChange":row-key="getRowKeys"><el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column><el-table-column label="索引" width="120" prop="index"></el-table-column></el-table><el-paginationlayout="prev, pager, next":page-size="10":total="total":current-page.sync="currentPage"@current-change="handleCurrentChange"></el-pagination></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data: {checkData: [],tableData: [],total: 13,currentPage: 1,},methods: {/** * 获取分页数据*/addDataItem(val, len) {this.tableData = Array.from({length: len}, (v, i) => v = {index: i,id: `${val}${i}`,});},handleCurrentChange(page) {this.currentPage = page;if (page === 1) {this.addDataItem(1, 10);} else {this.addDataItem(2, 3);}},handleSelectionChange(val) {this.checkData = val;},getRowKeys(row) {return row.id;},},created() {this.addDataItem(1, 10);},});</script>
</body>
</html>

[转]el-table表格翻页后仍记忆所选项相关推荐

java swing表格翻页_让Swing表格支持远程后台数据翻页
TWaver Java不但提供了TTable.TElementTable这些表格组件,而且还提供了表格翻页器TPageNavigator.让表格和翻页器结合工作,可以立刻做出一个非常标准的可翻页的表格 ...
select vba 网页翻页_通过VBA程序来实现Excel表格翻页的方法
在查看拥有较多数据的Excel工作表时,可以通过按"PageUp"或"PageDown"键(或拖动程序窗口左侧滚动条上的滑块)来进行翻页操作.实际上,用户还可以 ...
HTML表格翻页效果-洋葱先生-杨少通
HTML表格翻页效果-洋葱先生-杨少通洋葱先生-杨少通感谢您的到来这是一个表格翻页的效果,希望大家喜欢! 代码如下: <!DOCTYPE html> <html> < ...
87.el-table翻页后保存前一页所选并再次返回前一页时把数据勾选上
1.首先给<el-table>添加ref.row-key.选择单条事件.全选事件 <el-table ...... ref="newTable" row-key= ...
layui.table(表格)跨页多选
layui版本:2.5.4 使用数据表格时可能会需要在翻页时保留各个页面选中行的信息,效果如下. 效果演示实现思路实现思路大致分为以下三步 1.定义两个全局变量用于保存选中行的id,以及当前页所有 ...
Table表格刷新内容后
今天遇到了一个问题,Table表格显示两页,第一页五条记录,第二页少于五条纪录,然后点下一页翻页到第二页的时候,table最下面的边框还是会存在,排查了各种情况,终于发现是将box-sizing设置为 ...
Table表格文字超出后循环滚动的动画实现方案核心逻辑
需求前几天公司要求做一个动态表格:大概就是可配置的(颜色,字体,行数等等),用作屏幕展示.因此就要求表格文字在超出宽度时候可以有动画循环滚动展示内容.大概这个样子: 项目使用vue框架,动画因为涉及 ...
html表格翻页简单,利用jQuery实现一个简单的表格上下翻页效果
前言本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的实现方法吧. html: 日期参与团购场次团购结果当前状态 02.08 第一 ...
layui 滚动数据_layui 实现table翻页滚动条位置保持不变的例子
最近使用了layui table但是发现了一系列问题,由于被封装过不好自己修改,比如翻页后滑动条每次都会复位,导致体验不好,通过调试,我发现layui table并没有给div加id标签,我通过cla ...
让Swing表格支持远程后台数据翻页
TWaver Java不但提供了TTable.TElementTable这些表格组件,而且还提供了表格翻页器TPageNavigator.让表格和翻页器结合工作,可以立刻做出一个非常标准的可翻页的表格 ...

[转]el-table表格翻页后仍记忆所选项

[转]el-table表格翻页后仍记忆所选项相关推荐

最新文章

热门文章