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

  • 0x80240017未指定错误(0x80240017未指定错误ser2008r2)

    0x80240017未指定错误(0x80240017未指定错误ser2008r2)

  • 华为mate9 pro上市时间(华为mate9 pro 尺寸)

    华为mate9 pro上市时间(华为mate9 pro 尺寸)

  • bah4-w09是什么型号(bah4-w09是什么型号平板)

    bah4-w09是什么型号(bah4-w09是什么型号平板)

  • 荣耀30pro+有DC调光的吗(荣耀30pro+dc调光设置在哪)

    荣耀30pro+有DC调光的吗(荣耀30pro+dc调光设置在哪)

  • 怎么评论别人的朋友圈(怎么评论别人的作品好句子)

    怎么评论别人的朋友圈(怎么评论别人的作品好句子)

  • 美图t9手机上市时间

    美图t9手机上市时间

  • 淘宝保证金1000退不了(淘宝保证金1000必须交吗)

    淘宝保证金1000退不了(淘宝保证金1000必须交吗)

  • mx330显卡什么级别(mx330显卡属于什么级别)

    mx330显卡什么级别(mx330显卡属于什么级别)

  • 手机半屏幕黑屏,一半正常是什么原因(手机半屏黑屏怎么办)

    手机半屏幕黑屏,一半正常是什么原因(手机半屏黑屏怎么办)

  • 百姓网交易地点创建不了(百姓网交易地点一直创建中)

    百姓网交易地点创建不了(百姓网交易地点一直创建中)

  • 怎么设置软件不自动更新(怎么设置软件不跳转第三方软件)

    怎么设置软件不自动更新(怎么设置软件不跳转第三方软件)

  • 华为mate30出厂带膜吗(华为mate30手机出厂有膜吗)

    华为mate30出厂带膜吗(华为mate30手机出厂有膜吗)

  • honor10是什么型号(honor10是哪年的)

    honor10是什么型号(honor10是哪年的)

  • 神舟怎么进入bios(神舟怎么进入bios设置界面)

    神舟怎么进入bios(神舟怎么进入bios设置界面)

  • wps表格删除多余格子(wps表格删除多余的空白页面)

    wps表格删除多余格子(wps表格删除多余的空白页面)

  • 手机qq群里怎么@所有人(手机qq群里怎么@全部)

    手机qq群里怎么@所有人(手机qq群里怎么@全部)

  • 小米9pro怎么批量删除联系人(小米9pro怎么一键换机)

    小米9pro怎么批量删除联系人(小米9pro怎么一键换机)

  • wps长横线 怎么打(wps长横线怎么)

    wps长横线 怎么打(wps长横线怎么)

  • 苹果11什么时候正式发售(苹果11什么时候生产的)

    苹果11什么时候正式发售(苹果11什么时候生产的)

  • slaaloo是什么型号(slaaloo是什么型号手机)

    slaaloo是什么型号(slaaloo是什么型号手机)

  • windows media player安装不正确(windows media player可以删除吗)

    windows media player安装不正确(windows media player可以删除吗)

  • 抖音直播游戏怎么弄(抖音直播游戏怎么直播)

    抖音直播游戏怎么弄(抖音直播游戏怎么直播)

  • airpods后面按键干嘛的(airpods后边的按键)

    airpods后面按键干嘛的(airpods后边的按键)

  • 金立gn5001s是什么型号(金立gn5007)

    金立gn5001s是什么型号(金立gn5007)

  • 闪送如何取消订单(怎么取消闪送订单)

    闪送如何取消订单(怎么取消闪送订单)

  • cad圆角快捷键(cad把直角改为圆弧角)

    cad圆角快捷键(cad把直角改为圆弧角)

  • vue 项目中 向数组 添加元素 的方式(vue中数字运算)

    vue 项目中 向数组 添加元素 的方式(vue中数字运算)

  • phpcms后台登录验证码显示不出来(phpcms v9用户手册)

    phpcms后台登录验证码显示不出来(phpcms v9用户手册)

  • 转让金融商品应交增值税税率
  • 企业的其他业务收入包括哪些
  • 实际负税计算公式
  • 钢铁租赁公司
  • 报废的机器设备怎么处理
  • 公司网站建设费做账是流量应计入
  • 向境外个人支付咨询费如何算税
  • 通行费电子发票没有通行费字样
  • 租办公室还要交什么税
  • 加计扣除是什么意思举例说明农产品
  • 同一笔业务可以开多张发票吗
  • 企业所得税大白话解释
  • 货币资金项目应根据账户的期末余额合计填列
  • 计提持有至到期投资减值准备
  • 预付款与定金的比例
  • 垫资后转出的会计分录怎么写?
  • 调增教育经费如何做账
  • 金融业的增值税
  • 开汽车租赁发票需要什么资料?
  • 超豪华小汽车消费税起征点
  • 民间非营利组织有哪些
  • 递延年金现值计算公式解释
  • 回单是会计还是出纳职责
  • 小规模不动产销售不动产怎么交税
  • 理财产品属于货币吗
  • 收到运费发票是进项还是销项
  • 企业滞纳金属于什么税
  • 一般纳税人进货收到普票怎么做账
  • 小规模企业如何收款
  • 举办活动 举行活动
  • deepin切换系统
  • linux系统配置ip地址命令
  • 代扣可以退款吗
  • 净利润与未分配利润的勾稽关系
  • redhat5.6安装
  • 苹果电脑隐藏软件功能怎么开启
  • linux中cut命令详解
  • php面向对象的三大特征
  • 三维重建是啥意思
  • 爬虫失败的原因
  • 收入调节方式有哪三种
  • 公司开具了电子发票
  • 托盘账务处理
  • 电子发票的缺点
  • mongodb 根据条件查询数量
  • 不交社保的职业
  • 销售折扣的账务处理有详细的计算过程
  • 债务重组损失如何做会计分录
  • 电商账务怎么做
  • 记账凭证会计核算形式的程序
  • 堤围防护费是什么
  • 进口免税产品如何开票
  • 外贸企业的退税可以转出来吗
  • 购买生产原料的支出
  • 外经证预缴税款必须去外地交税吗
  • 工会经费计提的比例是多少
  • 根据《增值税暂行条例》的规定,适用9
  • 备查账一般采用什么账簿
  • mysql 5.7.13 winx64安装配置方法图文教程
  • watchs2最新版本
  • pavkre.exe - pavkre是什么进程 作用是什么
  • 如何解决windows资源管理器已停止工作
  • win8系统怎么样好用吗
  • win7怎么删除wifi已连接过的网络
  • 笔记本接外设
  • Win10专业版21h2
  • window10删除自带输入法
  • unity项目资源
  • opengl 4.2
  • nodejs抓取网页内容
  • com.android.phone无响应
  • 安卓作业仿银行
  • python多线程作用
  • 详解javascript事件冒泡
  • 多线程python爬虫
  • python爬虫京东
  • 安卓万能插件
  • 机票的抵扣率是多少
  • 成都国税工勤人员待遇
  • 税务筹划收费标准最新
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设