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

  • 印花税处罚适用征管法吗
  • 增值税发票超过3个月可以作废吗
  • 补提去年所得税会计分录怎么写
  • 工程款税率是多少专票
  • 未投入使用的固体废物
  • 公司购买汽车的折旧年限
  • 差额征税小规模免征增值税
  • 公司开办期间的装修费怎么会计处理
  • 发票备注没写
  • 收到税务局附加税退税税款的分录
  • 财政补贴的概念是什么?其性质是什么?
  • 小规模纳税人消费税怎么计算
  • 营改增 旅游服务
  • 应交税金及附加包括哪些
  • 公司一直没有做内账违法吗
  • 运费客户承担钱销售员垫付冲应收怎么处理?
  • 电商刷单的成本如何处理?
  • 企业基本保险
  • 分支机构企业所得税计提和缴纳数额不一致怎么办?
  • 建筑工程地址
  • 企业公车私用如何处理
  • 公司委托其他公司代缴社保合法吗
  • 出口退税是按进项税额吗
  • 以前年度发生的费用
  • 房产增值税征收期限
  • 施工企业开专票还是开普票好
  • 技术服务发票税率 5% 小规模
  • 建材公司将自产产品卖出
  • 出租车库收入是否需要计算缴纳土地增值税
  • 建筑业调试费进什么科目?
  • 公司向个人转账分录
  • 填写报关单需要什么资料
  • 技术服务费进项发票怎么做分录
  • 怎么在bios中开启硬件虚拟化
  • 电子承兑到期怎样接收
  • php函数返回值类型
  • 一般纳税人什么情况下可以开3%的税率
  • 福利企业增值税优惠政策
  • thinkphp3.1.3手册
  • 微信小程序全栈开发实战
  • javaweb简单项目案例
  • 代码简单图案
  • 前端面试题必问的题目
  • 进项税额转出结转会计分录怎么写
  • 印花税每个月都报吗
  • 红字信息表重复了怎么办
  • 公司承担员工的费用,员工违规吗
  • vue 鼠标移入移出(hover)切换显示图片问题
  • dev怎么保存项目
  • 企业应纳税所得额的计算应遵循权责发生制原则
  • 哪些发票必须备注
  • 申报纳税的步骤
  • 一般纳税人报税流程详细操作
  • 计提递延所得税资产影响当期利润吗
  • 怎么做掉公司账面库存100万
  • 汽车销售和租赁业务描述
  • 股东借款的利息收入
  • 设备维修费可以抵扣进项税吗
  • 售后回租的实质
  • 外币业务的会计分录
  • 企业缴纳车船税吗
  • 期末留抵的进项税可以计入成本吗
  • 购买汽车的工本费如何入账
  • 房屋租赁违约金比例
  • 提取法定盈余公积金会计分录
  • 什么是摊余成本法
  • mysql子查询效率如何
  • mysql重置binlog
  • 苹果15手机价格和图片颜色
  • WFXMOD32.EXE - WFXMOD32是什么进程
  • 编程乱码
  • linux更新内核的好处
  • win7系统更新怎么关闭
  • shell 多个文件合并
  • javascript用处
  • 房产营业税满2年怎么算
  • 四川省地方税务局公告2018年第3号
  • 国家税务总局公务员招录公告
  • 地下建筑规定
  • 诚信励志语录经典短句
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设