需求小能手——表格跨页勾选

前言

前段时间热门文章有一篇跨页勾选,点进去大致看了下,看到评论说跨页勾选需求就不应该做,内心十分赞同。没想到自己就碰到了这个需求,人总是向现实低头,产品要求只能实现,本节就来介绍一下我的实现思路。

实现

跨页勾选的效果很简单,就是将每页的数据保存起来,并且在切换页码时能否回显之前勾选的数据,公司技术栈为vue2+element,我们就以此为准,其他技术栈都是类似思路。既然我们用了ui库,那么我们优先通过组件自带的属性方法完成此功能。

el-table

el-table是element的表格,默认是没有勾选的,利用selection在表格最前面添加多选框,并且配合selection-change事件使用:

<el-table
:data="list"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column label="姓名" prop="name">
</el-table-column>
</el-table>

selection-change事件的参数就是勾选行的数组,如果只是单页勾选,我们的功能就完成了。当数据过多加上分页,当我们改变页码的时候,数据更新,再勾选,此时selection-change返回的数据仅仅是当前页的,之前勾选完全没保存,并且当我们在返回之前的页码,勾选项也都会取消。针对勾选项回显,el-table-column刚好有相关的属性:

需求小能手——表格跨页勾选
我们将reserve-selection设置为true,注意我们一定要添加row-key属性,row-key就是行数据的唯一标识。

  <el-table row-key="id">
  <el-table-column type="selection" reserve-selection width="55" />

事件

到此,就剩下最关键的一步,将数据处理。数据处理也很简单,就是筛选。上面提到了selection-change返回的是当前页选中行的数据,我们将每页的数据都保存到一个数组,然后进去去重,过滤等处理就能实现得到真正的数据。selection-change每次返回的都是数组,处理起来可能相对复杂点,所以我们用selectselect-all替代selection-change。

  • select:行内多选框状态变化时触发的事件,有两个参数selection(勾选的行数组),row(发生变化行的数据)。
  • select-all:全选多选框变化时触发的事件,也就是表头的多选框,该事件只有一个参数selection。
    下面开始我们的实现:
  1. 声明一个空数组multipleSelection,并且绑定上面两个事件。

<el-table 
@select='rowSelect' 
@select-all="selectAll" 
>

2.当勾选单个数据时,触发select,我们通过selection中是否包含row判断当前行是选中还是取消,如果选中就用unshift添加到数组中,如果是取消就将该行从数组用splice方法删除,splice需要知道下标位置,这里我们用findIndex方法获取下标。我们假设行数据唯一标识为id,然后写出rowSelect。

需求小能手——表格跨页勾选
3.全选多选框有三种状态,全选,半选,取消,重点考虑半选状态,半选也就是说有某些行已经选过了,此时再全选就有两种思路:

  • 将数据全部添加到数组然后去重。
  • 获取未被单独勾选的添加到数组。
    刚好最近学习lodash源码库,这里我们借助lodash库用第二种方式实现,里面有一个lodash.differenceBy方法,可以让我们获取到未被勾选的单独数据,并且该方法也能兼容全选。最后取消,我们就用filter过滤掉当前list的数据。

需求小能手——表格跨页勾选
这样我们单独勾选与全选,multipleSelection都会进行添加与删除,并且不会重复与遗漏,我们能够随意的跨页勾选。

总结

以上就跨页勾选的实现过程,整体实现还是很简单的,主要就是数据的处理,借助lodash库也提高了我们的效率。我们也可以在此基础上进行优化,比如添加row-click事件,当行选中联动前面的多选框进行勾选。

原文链接:https://juejin.cn/post/7338704641842413631 作者:躺平使者

(0)
上一篇 2024年2月24日 上午10:42
下一篇 2024年2月24日 上午10:53

相关推荐

发表回复

登录后才能评论