位置: IT常识 - 正文

elementui中表格多选+分页,保存所有选中数据(elementui的表格)

编辑:rootadmin
element UI中table表格在选中数据后点击分页,再选中数据,回到第一页后,原来选中的数据已经不再是勾选状态了,现在要怎样记住所有分页中的勾选状态呢?我这里有比较简便的方法。不需要缓存数据等复杂的方式。 1、首先在table标签上定义row-key和ref标志名称。具体row-key等功效, ...

推荐整理分享elementui中表格多选+分页,保存所有选中数据(elementui的表格),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elementui表格多选框,elementui多个dialog,element ui表格多选,elementui复杂表格,element表格表单,element ui表格多选,element ui表格多选,elementui表格多选框,内容如对您有帮助,希望把文章链接给更多的朋友!

element UI中table表格在选中数据后点击分页,再选中数据,回到第一页后,原来选中的数据已经不再是勾选状态了,现在要怎样记住所有分页中的勾选状态呢?我这里有比较简便的方法。不需要缓存数据等复杂的方式。

1、首先在table标签上定义row-key和ref标志名称。具体row-key等功效,可以参考element UI文档。代码如下:

<el-table ref="table" v-loading="loading" :data="dataList" row-key="id" @select="selectItem" @select-all="selectAll" > <el-table-column key="1" type="selection" width="40" reserve-selection /></el-table>elementui中表格多选+分页,保存所有选中数据(elementui的表格)

2、定义选择单列(selectItem)和全选(selectAll)的方法。代码如下:

selectItem(list, row) { this.checkList = list}

把当前页选中的数据保存到checkList数组中,该数据仅保存的是当前页选中数据。(若切换分页选中,数据会被覆盖为最新选中数据)

selectAll(selection) { // 若取消全选,当前页的选中数据移除 if (selection.length === 0) { const ids = this.dataList.map((i) => { return i.id }) for (var i = 0; i < this.checkList.length; i++) { if (ids.indexOf(this.checkList[i].id) > -1) { this.checkList.splice(i, 1) i-- } } } const arr = [...selection, ...this.checkList] this.checkList = Array.from(new Set(arr))},

全选的方法中,需要判断是勾选还是取消勾选。若取消勾选,需要把当前页选中的数据全部清空。

3、清空所有选中的数据方式。代码如下:

this.$refs.table.clearSelection()this.checkList = []

清空表格中选中项,再清空选中数组。

这种处理方式,就可以在分页时依然记得之前选中的数据,返回原来分页数据还在,全选选中与否,数据都可以随之修改。nice~~

本文链接地址:https://www.jiuchutong.com/zhishi/304776.html 转载请保留说明!

上一篇:什么是Python中的闭包(什么叫python)

下一篇:跨域问题及其解决方法(JSONP&CORS)(跨域问题是什么)

  • 出厂设置在哪里vivo(手机恢复出厂设置在哪里)

    出厂设置在哪里vivo(手机恢复出厂设置在哪里)

  • 朋友圈评论删除后对方收到提示吗(朋友圈评论删除了还可以恢复吗)

    朋友圈评论删除后对方收到提示吗(朋友圈评论删除了还可以恢复吗)

  • 微信语音对方忙线中是什么意思(微信语音对方忙线中是拒绝吗)

    微信语音对方忙线中是什么意思(微信语音对方忙线中是拒绝吗)

  • 超过五分钟的视频怎么发给微信好友(超过五分钟的视频怎么发)

    超过五分钟的视频怎么发给微信好友(超过五分钟的视频怎么发)

  • 怎么把电脑上的微信锁起来(怎么把电脑上的聊天记录恢复到手机上)

    怎么把电脑上的微信锁起来(怎么把电脑上的聊天记录恢复到手机上)

  • 苹果手机有没有红外遥控功能(苹果手机有没有nfc功能)

    苹果手机有没有红外遥控功能(苹果手机有没有nfc功能)

  • 钉钉个人中心在哪里啊(钉钉个人中心怎么进去)

    钉钉个人中心在哪里啊(钉钉个人中心怎么进去)

  • 企业微信签到怎么改定位(企业微信签到怎么设置提醒)

    企业微信签到怎么改定位(企业微信签到怎么设置提醒)

  • 苹果11声音忽大忽小(苹果11声音忽然变大或变小)

    苹果11声音忽大忽小(苹果11声音忽然变大或变小)

  • 荣耀v206+128和8+128区别(荣耀v206+128参数)

    荣耀v206+128和8+128区别(荣耀v206+128参数)

  • 手机克隆是不是只有华为手机才能接收(手机克隆是不是把所有的app都克隆了)

    手机克隆是不是只有华为手机才能接收(手机克隆是不是把所有的app都克隆了)

  • qq里点赞失败怎么回事(qq点赞失败但是又显示点过了)

    qq里点赞失败怎么回事(qq点赞失败但是又显示点过了)

  • 华为怎么下载google商店(华为怎么下载Google map)

    华为怎么下载google商店(华为怎么下载Google map)

  • 苹果xr是九代吗(苹果手机xr是苹果几代)

    苹果xr是九代吗(苹果手机xr是苹果几代)

  • 注销抖音账号要多久(注销抖音账号要多久才可以建新号)

    注销抖音账号要多久(注销抖音账号要多久才可以建新号)

  • qq注销了怎么恢复(qq注销了怎么找回来)

    qq注销了怎么恢复(qq注销了怎么找回来)

  • 小米4有没有红外线功能(小米4有没有红外线遥控)

    小米4有没有红外线功能(小米4有没有红外线遥控)

  • 三星note10韩版和国行的区别(三星note10韩版和美版哪个好)

    三星note10韩版和国行的区别(三星note10韩版和美版哪个好)

  • ode45的用法(ode45用法举例)

    ode45的用法(ode45用法举例)

  • exe文件打不开解决方法(.exe文件怎么打不开)

    exe文件打不开解决方法(.exe文件怎么打不开)

  • 怎么把WinPE的ios安装到硬盘?安装winpe到硬盘的教程(winpe怎么安装到u盘)

    怎么把WinPE的ios安装到硬盘?安装winpe到硬盘的教程(winpe怎么安装到u盘)

  • 【综述】分子预训练模型综述

    【综述】分子预训练模型综述

  • npm ERR! notarget No matching version found for xxx@^1.0.64. npm 插件安装失败

    npm ERR! notarget No matching version found for xxx@^1.0.64. npm 插件安装失败

  • JavaScript进阶内容——DOM详解(javascript高阶)

    JavaScript进阶内容——DOM详解(javascript高阶)

  • phpcms如何自定义表单(phpcms模板制作教程)

    phpcms如何自定义表单(phpcms模板制作教程)

  • 什么是价税分离的原因
  • 无形资产摊销年限可以变更吗
  • 城市基础设施配套费减免
  • 账户利息怎么做账务处理
  • 小规模个税每月限免额是多少
  • 出租包装物租金是营业外收入吗
  • 外贸公司报关员是干什么的
  • 购买原材料记账凭证怎么写
  • 小企业会计准则调整以前年度费用分录
  • 持有待售固定资产按照账面价值与可收回金额
  • 核定企业的征收方式
  • 企业设备融资是什么意思?
  • 固定资产清理不能有余额
  • 合伙企业出资额不计入实收资本和资本公积 那放哪
  • 怎么修改财务负责人信息
  • 财务费用利息收入在损益表中怎么填
  • 一般纳税人注销库存需要补交税吗
  • 资本资产定价模型
  • 发票代码会有一样的吗
  • 对整个产品的零件退回的财务会计处理?
  • 合伙企业财产的管理和使用规定
  • 删掉广告有什么办法
  • php中cookie和session的区别
  • 微信小程序开发一个多少钱
  • an exit
  • php fgets函数的用法
  • 提取的坏账准备使用完后如何处理
  • 企业租地建厂流程
  • 银行贷款每个月都要还吗?
  • 工程施工会计做账流程及会计分录
  • html5旅游网页设计
  • 一阶段目标检测算法
  • Vue3通透教程【二】更高效的构建工具—Vite
  • win11安卓子系统教程
  • apt apt-get aptitude
  • 生产企业出口退税政策
  • 金税三期可以申报个税吗
  • 办理外经证缴税流程
  • 电子承兑汇票到期怎么收款
  • python搜索函数
  • sqlcoalesce
  • 将自产产品用于建造厂房
  • 计提工资的时候计提个税吗
  • 住宿补贴怎么算
  • 投资性房地产对外出租的账务处理
  • 企业固定资产贷款二押的风险
  • 会计学中的折旧是什么意思
  • 残疾人工资加计扣除包括社保吗
  • 个税专项附加继续教育如何扣除?
  • 未经加工的
  • 计提工会经费如何做账
  • 投标保证金支付给谁
  • 代垫水电费的账务处理
  • 固定资产抵账的账务处理
  • 企业给职工发放的自产产品应作为职工福利费管理
  • 企业新增的残疾税
  • 开设专栏方案
  • 哪些会计凭证可以抵扣进项税
  • sql存储过程实例有哪些
  • sqlserver数据库维护
  • 无法ping通虚拟机
  • ubuntu 2021
  • 苹果MaC系统查找微信储存文件
  • Win8.1怎么打开无线网卡
  • win8怎么找开始程序
  • apache80端口被占用的解决方法
  • win10笔记本键盘失灵按什么键恢复
  • android 图像处理
  • js函数详解
  • .net 迭代器
  • JavaScript中setUTCMilliseconds()方法的使用详解
  • python爬虫快速入门
  • android 底部选择菜单
  • jquery.data
  • 12366纳税服务热线工作时间
  • 新公司税务报到流程步骤
  • 内蒙古税务局发票认证
  • 个人自行申报纳税
  • 鸿蒙2.0哪个版本续航好
  • 2020年青海国税工资待遇
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设