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

目录

• vue elementUI-el-table动态显示隐藏列
• 主要代码如下
• 相关截图
• 总结

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

在实际工作场景中，我们在展示数据时，会遇到展示数据过多此时会将数据分页展示，但是如果数据列展示过多，会造成每列数据相对比较拥挤，并且所有的列数据不一定都是必须展示的。

可以将其先隐藏，用户需要时才将其显示在列表之中。所以本文章结合vue+elementUI--中的el-table以及分页实现表格列的动态隐藏与显示。

实现思路：将表格展示+分页+显示/隐藏列  组件化，其中利用slot动态展示不同的表格数据，父组件引用此组件传递相应切必须的参数，当分页或显示/隐藏列动态变化时将数据再返回父组件，父组件中的列根据回传的数据利用v-if实现列的显示与隐藏（此代码为第一版！）

主要代码如下

子组件（trendsTable.vue）主要代码：

 

引用此组件时主要代码：

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

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

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

相关截图

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。