位置: 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)(跨域问题是什么)

  • 小米12怎么设置字体大小(小米12怎么设置抖音播放静音)

    小米12怎么设置字体大小(小米12怎么设置抖音播放静音)

  • 小米平板5怎么下载和平精英(小米平板5怎么看激活时间)

    小米平板5怎么下载和平精英(小米平板5怎么看激活时间)

  • vivo手机怎么设置成黑白模式(vivo手机怎么设置高清通话功能)

    vivo手机怎么设置成黑白模式(vivo手机怎么设置高清通话功能)

  • 支付宝代办的健康码可以删除吗(支付宝代办的健康码找不到了怎么办)

    支付宝代办的健康码可以删除吗(支付宝代办的健康码找不到了怎么办)

  • 抖音蓝v有什么好处吗(抖音蓝v有什么好处和坏处)

    抖音蓝v有什么好处吗(抖音蓝v有什么好处和坏处)

  • 微信运动会显示路线吗(微信运动会显示苹果手表)

    微信运动会显示路线吗(微信运动会显示苹果手表)

  • 三层交换机的功能(三层交换机的功能包括)

    三层交换机的功能(三层交换机的功能包括)

  • i7蓝牙耳机怎么充电(i7蓝牙耳机怎么看电量)

    i7蓝牙耳机怎么充电(i7蓝牙耳机怎么看电量)

  • cpu带核显和不带核显有什么区别(cpu带核显和不带核显性能差距)

    cpu带核显和不带核显有什么区别(cpu带核显和不带核显性能差距)

  • 手机信号屏蔽器哪里买得到(手机信号屏蔽器哪个牌子好)

    手机信号屏蔽器哪里买得到(手机信号屏蔽器哪个牌子好)

  • jbl左耳怎么连不上(jbl左耳连不上右耳)

    jbl左耳怎么连不上(jbl左耳连不上右耳)

  • 转转聊天记录删除不了(转转聊天记录删了怎么找)

    转转聊天记录删除不了(转转聊天记录删了怎么找)

  • 打电话录屏有声音吗(打电话录屏为啥没声音)

    打电话录屏有声音吗(打电话录屏为啥没声音)

  • 关闭新消息通知会怎样(怎么关闭消息通知)

    关闭新消息通知会怎样(怎么关闭消息通知)

  • 芒果tv是不是腾讯应用(芒果tv属于腾讯软件吗?)

    芒果tv是不是腾讯应用(芒果tv属于腾讯软件吗?)

  • 华为手环4怎么配对苹果手机(华为手环4怎么使用教程)

    华为手环4怎么配对苹果手机(华为手环4怎么使用教程)

  • 通常所说的微型主机是指(通常所说的微型计算机)

    通常所说的微型主机是指(通常所说的微型计算机)

  • 淘金币在哪儿看(淘金币哪里查)

    淘金币在哪儿看(淘金币哪里查)

  • 抖音帮上热门对方知道吗(抖音帮上热门对自己账号有影响吗)

    抖音帮上热门对方知道吗(抖音帮上热门对自己账号有影响吗)

  • 苹果蓝牙音量怎么调(苹果蓝牙音量怎么调整)

    苹果蓝牙音量怎么调(苹果蓝牙音量怎么调整)

  • 通过快手号能查出对方的位置吗(通过快手号能查到抖音号吗)

    通过快手号能查出对方的位置吗(通过快手号能查到抖音号吗)

  • 库乐队怎么边弹边录音(怎么用库乐队弹奏)

    库乐队怎么边弹边录音(怎么用库乐队弹奏)

  • airpods有哪些功能(airpods哪些功能)

    airpods有哪些功能(airpods哪些功能)

  • 如何下载tiktok(在国外如何下载tiktok)

    如何下载tiktok(在国外如何下载tiktok)

  • oppofindx电池容量多大(OPPOfindx电池容量怎么看)

    oppofindx电池容量多大(OPPOfindx电池容量怎么看)

  • 如何通过QQ号查手机号(如何通过qq号查别人的个人信息)

    如何通过QQ号查手机号(如何通过qq号查别人的个人信息)

  • 表格中的小三角怎么弄(表格中的小三角怎么去除)

    表格中的小三角怎么弄(表格中的小三角怎么去除)

  • win7系统还原怎么操作(win7系统还原怎么还原到出场设置)

    win7系统还原怎么操作(win7系统还原怎么还原到出场设置)

  • 什么是工程销项表
  • 递延所得税资产和负债怎么计算
  • 小规模纳税属于什么类型
  • 出租房屋收取的水电费如何记账
  • 长期股权投资是金融资产还是非金融资产
  • 个人转让土地使用权
  • 设备租赁费用
  • 水利建设专项收入怎么计算
  • 公司代收代付会被监控吗
  • 增值税申报表更正情况说明怎么写
  • 土地流转承包费拖欠
  • 百望税控盘电子发票
  • 增值税专用发票可以开电子发票吗
  • 法人股东获得分红的规定
  • 退回来的税怎么做账务处理
  • 2021最新车船税
  • 小规模企业交纳印花税吗
  • 进项认证转出 会计得入账吗
  • windos11安卓
  • 土地征收补偿款多久到账
  • 平板电脑的windows更新有必要吗
  • 公司收到加盟费怎么做会计分录
  • 发票认证平台上不去
  • 购入股票佣金会减少吗
  • 财政补助收入的支付制度包括
  • 微软windows11iso
  • vue实现导出
  • 违约金要计入应纳税所得额吗
  • TypeError: Cannot read properties of null (reading ‘insertBefore‘) vue项目报错
  • vue获取当前路由地址
  • 第二季度企业所得税怎么算出来
  • php实现邮箱验证码
  • php与ajax交互
  • php生成随机字符串
  • 公司基本户可以收款吗
  • 房屋土地使用权到期后续费标准
  • 本月损益类未结转为零的一级科目
  • 注意力机制加在什么位置
  • 从零开始吧
  • 14个Python处理Excel的常用操作,非常好用
  • 本月的进项票可以抵扣上月税款吗?
  • python颜色代码有哪些
  • 税务稽查补税
  • 查账征收的纳税人能否简易注销
  • 借受托代销商品贷受托代销商品款
  • 自产和外购用于赠送
  • 减免增值税的账务处理是什么
  • 成本票可以用在下个季度吗
  • 固定资产清理是资产类的备抵科目吗
  • 企业所得税的应纳税所得额怎么计算
  • 分配现金股利如何做会计分录
  • 固定资产发票有什么用
  • 外购固定资产的会计处理
  • 固定资产领用原因
  • 去银行提备用金需要什么
  • 会计应该怎么做职业规划
  • 在sql server中使用对象资源管理器和SQL
  • mysql_info
  • vmware虚拟机怎么克隆
  • win7系统怎么合并分区
  • centos 6.6安装教程
  • SWNETSUP.EXE - SWNETSUP是什么进程 有什么用
  • win10周年更新版是什么意思
  • win8双系统安装教程
  • win10更新中重启会怎么样
  • linux命令删除指定目录
  • 向量上面有个倒着的v
  • pythonreduce函数的作用
  • perl pop push shift unshift实例介绍
  • javascript运行在什么的脚本语言
  • unity3d性能优化之贴图科普篇
  • pythonlist排序算法
  • python怎么将列表转换成数字
  • 甘肃省网上税务登记流程
  • 四川省成都市国池酒厂52度原浆多少钱一瓶
  • 北京交通政务
  • 地方税务局发票查询
  • 陕西税务厅
  • 纳税人在国外签字流程
  • 怎么称呼税管员比较好
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设