vue+elementUI-el-table实现动态显示隐藏列

在实际工作场景中,我们在展示数据时,会遇到展示数据过多此时会将数据分页展示,但是如果数据列展示过多,会造成每列数据相对比较拥挤,并且所有的列数据不一定都是必须展示的。可以将其先隐藏,用户需要时才将其显示在列表之中。所以本文章结合vue+elementUI--中的el-table以及分页实现表格列的动态隐藏与显示。

实现思路:将表格展示+分页+显示/隐藏列  组件化,其中利用slot动态展示不同的表格数据,父组件引用此组件传递相应切必须的参数,当分页或显示/隐藏列动态变化时将数据再返回父组件,父组件中的列根据回传的数据利用v-if实现列的显示与隐藏(此代码为第一版,如有什么好的实现方式可以留言交流哦!!!)

主要代码如下:

子组件(trendsTable.vue)主要代码:







引用此组件时主要代码:

// 引入-table-组件
import TrendsTable from "@/components/trendsTable.vue";

主要代码就是根据子组件返回的数组利用v-if进行判断 


                      
                      
                      
                        
                      
                      
                       
                     
                       
                      
                        
                      
                      
                      
                        
                      
                      
                      
                    

主要就是利用el-table组件此处就做了序号,多选如果需要更多操作可以自定义扩展。

相关截图:

vue+elementUI-el-table实现动态显示隐藏列_第1张图片

vue+elementUI-el-table实现动态显示隐藏列_第2张图片

你可能感兴趣的:(vue,HTML,前端,vue.js,less,前端,node.js,javascript)