elementUI自定义table多选
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了elementUI自定义table多选相关的知识,希望对你有一定的参考价值。
参考技术A 首先看下我的效果图需求
当选择某一行的时候要选择当前行,并且将当前行的用户数据显示在头部;如果已经选中,则取消选中效果同时删除头部对应的用户图像,当切换分页时如果头部已经有选中,则勾选对应的行,当编辑时,也要进行回显
原因
elementUI的table组件提供的toggleRowSelection方法不生效
实现
a-首先放弃使用组件内置提供的seletion选项,使用插槽自定义
b-当获取数据后,向自定义的选择框添加绑定事件
(使用jquery是因为原生的removeEventListener无法成功解绑事件,这会导致事件重复执行多次而渲染错误;当为激活状态时 使用active作为标记)
c-筛选el-table点击事件,使其只在点击选择框时触发,同时向头像框数据push或者delete
(经过调试,当column.label不存在时,即表示点击多选框;actorsImgs就是用于显示图像的数据容器;activeRow则是内部记录的每一页的激活项)
d-当用户点击某个图像时,删除图像同时让对应多选框恢复为默认状态
e-当用户分页时,记录当前激活的page,并在相等时激活当前页的已选中项
f-当为编辑时,首先需要获取当前行关联的用户;由于无法记录用户在那页有选中数据,因此需要手动计算
(xb即计算出的当前页选中的变量)
至此,该功能实现完毕。(ps,如果有相同需求的小伙伴,能够使用el-table提供的方法,麻烦留个言。因为本人尝试了多次无效)
2021-1-30更新,本文章只提供实现思路,因为在交付测试过程中仍然有bug,但由于本人偏懒就不重新整理了
elementUI 结合createElement自定义table头部筛选
参考技术A用elementUI的table处理数据时经常要遇到筛选,但element官方对表格的筛选具有一定的局限性,所以自己结合createElement写了一个类似搜索的列筛选功能。如下图:
利用elementUI自带 render-header 表格列操作的属性
结合 createElement 创建虚拟DOM。
以上步骤基本实现了自定义table头部筛选。
以上是关于elementUI自定义table多选的主要内容,如果未能解决你的问题,请参考以下文章
c# WPF Telerik combobox 多选自定义显示值
elementUI 结合createElement自定义table头部筛选