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

  • 腾讯视频怎么邀请好友一起观看(腾讯视频怎么邀请)

    腾讯视频怎么邀请好友一起观看(腾讯视频怎么邀请)

  • 哔哩哔哩怎么设置定时提醒(哔哩哔哩怎么设置密码登陆)

    哔哩哔哩怎么设置定时提醒(哔哩哔哩怎么设置密码登陆)

  • 华为双系统在哪里开(华为双系统在哪里管理)

    华为双系统在哪里开(华为双系统在哪里管理)

  • opporeno4支持屏幕指纹吗(opporeno4屏幕是曲屏吗)

    opporeno4支持屏幕指纹吗(opporeno4屏幕是曲屏吗)

  • 电脑版WPS修订模式在哪(wps修订模式在哪)

    电脑版WPS修订模式在哪(wps修订模式在哪)

  • airpods2右耳没反应(airpods右耳没有反应)

    airpods2右耳没反应(airpods右耳没有反应)

  • 电脑pin码是开机密码吗(电脑pin码开机关闭)

    电脑pin码是开机密码吗(电脑pin码开机关闭)

  • oppor15有红外线遥控吗(oppor15有红外线遥控功能吗)

    oppor15有红外线遥控吗(oppor15有红外线遥控功能吗)

  • 小米手机相机专业模式怎么调(小米手机相机专业模式ev不能调)

    小米手机相机专业模式怎么调(小米手机相机专业模式ev不能调)

  • 普通窗口已达到上限怎么关闭(普通窗口已上线)

    普通窗口已达到上限怎么关闭(普通窗口已上线)

  • 5g手机支持4g网络吗(5g手机也支持4g网络吗)

    5g手机支持4g网络吗(5g手机也支持4g网络吗)

  • txt属于什么文件

    txt属于什么文件

  • 电脑抓屏键是什么(电脑抓屏键是什么意思)

    电脑抓屏键是什么(电脑抓屏键是什么意思)

  • iphone8防水到什么程度(苹果八防水)

    iphone8防水到什么程度(苹果八防水)

  • 华为rioul00什么型号(华为rloul00)

    华为rioul00什么型号(华为rloul00)

  • 探探上怎么解除暗恋(探探上怎么解除别人让别人看不见你的关注)

    探探上怎么解除暗恋(探探上怎么解除别人让别人看不见你的关注)

  • 收款记录怎么加好友(收款记录怎么加微信)

    收款记录怎么加好友(收款记录怎么加微信)

  • ipad air可以连鼠标吗(ipad可不可以连接鼠标)

    ipad air可以连鼠标吗(ipad可不可以连接鼠标)

  • 在windows7中什么是操作系统的控制管理中心(在windows7中什么部分用来显示应用程序名)

    在windows7中什么是操作系统的控制管理中心(在windows7中什么部分用来显示应用程序名)

  • 通过ip能精确定位吗(通过ip地址可以定位到多精细)

    通过ip能精确定位吗(通过ip地址可以定位到多精细)

  • word轮廓文本2怎么弄(轮廓文本2在哪里)

    word轮廓文本2怎么弄(轮廓文本2在哪里)

  • 华为智慧视觉怎么用(华为智慧视觉怎么放到桌面)

    华为智慧视觉怎么用(华为智慧视觉怎么放到桌面)

  • 接电话屏幕黑怎么办(接电话屏幕黑怎么回事)

    接电话屏幕黑怎么办(接电话屏幕黑怎么回事)

  • 电脑右下角弹出广告的解决方法是什么?(电脑右下角弹出网页没有×怎么关闭)

    电脑右下角弹出广告的解决方法是什么?(电脑右下角弹出网页没有×怎么关闭)

  • 图解Nginx,系统架构演变 + Nginx反向代理与负载均衡(nginx gui)

    图解Nginx,系统架构演变 + Nginx反向代理与负载均衡(nginx gui)

  • 税金及附加借贷科目
  • 资产负债表不平衡如何查找
  • 税务不受地方管吗
  • 出售其他债权投资
  • 股东借款怎么转为利润分配
  • 监理行业增值税税率多少
  • 申报财务报表时应收和预收可以合并
  • 一般纳税人所得税是季报还是月报
  • 固定资产抵债要交税吗怎么交
  • 未加工食材
  • 公司章程上的出资时间2050年
  • 应付账款扣款怎么做账
  • 增值税电子发票怎么作废
  • 单位承租个人房屋交哪些税2020年
  • 待转销项税额如何列报
  • 搅拌站需要什么土地
  • 所得税退费怎么操作
  • 借款余额在借方说明什么
  • 哪些津贴免征个税
  • 生产企业出口货物必须以什么为计税依据计算免抵退税额
  • 总杠杆系数的计算公司
  • 对公账户转账有延迟吗
  • 工程分配协议书范本
  • led电子屏税收编码
  • Windows无法启动服务
  • 自产自用产品的会计处理
  • 累计带薪缺勤的核算和计量
  • 公司雇用临时工人工资需要到税务局开发票吗
  • 公司撤股后还要担责任吗
  • php ftp管理系统
  • 私企固定资产管理办法
  • 对股权奖励的计算公式
  • php新手入门
  • 自有物业出租需交税吗
  • php处理异常
  • 用python处理图像
  • 2022年终总结
  • audit result
  • 事业周转编制
  • 应交增值税科目设置及账务处理
  • 增值税纳税申报表怎么填
  • 个人所得税银行卡未实名认证是什么意思
  • css的flex:1
  • 小企业会计准则适用于哪些企业
  • 发票冲红和作废有啥区别
  • 没进项发票开销项发票是可以吗?
  • 应付帐款借方余额,但对方公司己注销
  • 税务局核定税种流程
  • 以前年度多交的房产税现在收到退税款了咋做分录
  • 财务风险有什么类别
  • 长期待摊费用属于资产类吗
  • 成本类科目在哪里列式
  • 收到美元收入如何入账
  • 计提有哪些科目
  • 修缮服务指什么
  • 个人独资企业交什么税
  • 跨国企业在国外设立工厂的战略地位
  • 如何移植操作系统
  • 教你怎么制作麻雀胶
  • linux里top
  • centos关闭gui
  • win7看视频黑屏有声音
  • windows屏幕上有多个窗口时
  • xp系统如何取消开机自动启动程序
  • win8.1进不了系统
  • win10如何将我的电脑添加到桌面
  • win10更新补丁后键盘失灵
  • 电脑系统脚本错误
  • React Native react-navigation 导航使用详解
  • linux什么是二进制文件
  • dos常用命令与批处理文件
  • Custom List in inspector, displaying data your way[Unity]
  • 通过短信发送费用可能会收取运营商费用
  • python写抢购教程
  • 收藏一些不常用的图片
  • 土地增值税税率表
  • 如何退契税网上申请
  • 国税手撕发票图片
  • 开通税务在哪里弄
  • 房屋契税交错了能退吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设