vue+elmentUi实现table列筛选动态展示功能

table列筛动态选展示功能的实现

前言: 用过elementUi的小伙伴都知道,用它配合vue来写前端页面是很爽的,在大多数情况下,直接拿过来使用就能满足产品需求。就拿table组件来说,从简单的表格展示到到复杂自定义,开发者把很多可能涉及到的场景都考虑了进来。但是细心的你可能会发现,在使用table组件的时候,行是动态加载的,很多的操作都是对行进行的,而列是在一开始使用的时候要展示哪些列就写死了,如果展示的列很多,就算使用了固定列啥的冻结,用户在操作的时候依然会有很多不便,那么能不能通过筛选操作动态的展示想要看到的列数据呢?comme on,我们一起来看看吧!

首先使用table组件正常展示表格数据,把本来要写死的列通过for循环展示:


  
  
  
 

结果发现表格数据展示正常:

在这里插入图片描述

然后使用Popover弹出框实现点击弹出筛选项,进行筛选操作:


点击筛选后,页面可进行条件选择,效果展示如下:

在这里插入图片描述

加入js操作代码,最中全部代码如下:



                    
                    

你可能感兴趣的:(vue+elmentUi实现table列筛选动态展示功能)