elementUI的table分页多选,保持数据的选中状态

vue项目中遇到一个需求,一个优惠券用在多个商品上面,创建优惠券的时候把这些商品添加上。
选中一个在上方添加一个,取消一个,上方减少一个。且翻页后选中状态保持不变。
最终的样式
elementUI的table分页多选,保持数据的选中状态_第1张图片

刚开始做想用纯JS/数组api写出来(已弃用,留作笔记)

用到的:

  • select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row

判断商品是否处在被勾选的状态,是,将其添加到数组中,否,取出该商品的索引,根据索引将数组中的改商品删掉。
html
elementUI的table分页多选,保持数据的选中状态_第2张图片
js
elementUI的table分页多选,保持数据的选中状态_第3张图片

由于分页多选时状态不能保留,决定用element-ui提供的简单方法

  • 首先设置::row-key="getRowKey"
    elementUI的table分页多选,保持数据的选中状态_第4张图片
  • 在复选框增加属性
    :reserve-selection="true"
  • 在methods方法中将数据赋给自定义好的数组中
    在这里插入图片描述

至此功能已经实现。后续做了优化,选中的数据也可以点击进行删除,并且使勾选状态取消。

elementUI的table分页多选,保持数据的选中状态_第5张图片
elementUI的table分页多选,保持数据的选中状态_第6张图片

  • 点击后先通过索引将该条数据从数组中删除
  • 将对应的数据状态改为false
  • 重新对数组进行赋值,改变数组长度
    elementUI的table分页多选,保持数据的选中状态_第7张图片
    遗留问题::row-key的使用

你可能感兴趣的:(VUE专栏,笔记,vue)