用选择器代替表格列的筛选功能
功能 表格 选择器 筛选 代替
2023-09-14 09:08:23 时间
在elementUI中,table表格组件的列本身有属性支持当前页的筛选功能,不过当列项较多时,并且列的label文字较长时,此时的筛选功能按钮(一个箭头向下的小按钮)不是很明显,对用户来说感观效果不是很好。此时,可以通过自定义表格头样式来提升感观效果,我们可以在表头中添加选择器,同样也可以实现当前页或者整个数据的筛选。下面说一下实现步骤:
(1)在指定的一列中设置自定义表头属性,通过slot属性值为header来设置,在template的插值中添加select选择器;
(2)通过样式覆盖的方式稍微调整一下select选择器的样式;此外,我们还可以通过el-option-group的方式来添加筛选功能的提示信息;
(3)对table数据进行数据绑定,通过select选择器的选择值不同进行筛选数据,此时需要通过计算的方式返回数据给table,原有的table数据不做改动,在一个函数中根据筛选条件对原有table数据进行筛选,将筛选后的数据放在一个临时的数组中,形成一份新的数据返回给table表格;此时,就可以达到筛选当前页的功能,要想对整个数据的筛选的话,那么就不要做两份数据的处理了,直接将筛选后的数据返回给table表格绑定的变量。
相关文章
- 201604深圳云栖大会Workshop - 使用表格存储开发用户弹幕功能
- C++设计模式8--装饰模式(Decorator)--动态的增减功能
- EasyPlayer Android基于ffmpeg实现播放(RTSP/RTMP/HTTP/HLS)同步录像功能
- QrCode的实现二维码功能
- 一张图解析FastAdmin中的表格列表的功能[转]
- 64. 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能
- SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能试读版
- SAP UI5 应用开发教程之二十九 - SAP UI5 的路由和导航功能介绍试读版
- Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结
- SAP UI5 应用开发教程之六十六 - 基于 OData V4 的 SAP UI5 表格控件如何实现删除功能试读版
- SAP UI5 应用开发教程之六十五 - 基于 OData V4 的 SAP UI5 表格控件如何实现创建,编辑和保存功能试读版
- SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能试读版
- SAP UI5 应用开发教程之二十九 - SAP UI5 的路由和导航功能介绍试读版
- android 9.0 10.0启用和停用蓝牙模块(蓝牙模块功能开关控制)
- 【PyTorch】中view()==>相当于numpy中resize()、reshape()的功能
- 【Android 内存优化】Android Profiler 工具常用功能 ( 监测内存 | 内存快照 )
- 用链表实现队列的功能
- 玩转华为ENSP模拟器系列 | 配置MSTP功能示例
- Markdown 中的目录自动生成功能 TOC (2019-06-27 博客园已经支持 TOC)
- 基于Socket通讯(C#)和WebSocket协议(net)编写的两种聊天功能(文末附源码下载地址)
- hadoop入门(九):日志聚集功能配置
- 008:Mapbox GL添加比例尺scale功能