vue——动态控制表格列的显示和隐藏

最新推荐文章于 2024-07-26 08:15:00 发布

景严

最新推荐文章于 2024-07-26 08:15:00 发布

阅读量3.1w

点赞数 3

文章标签： vue 动态显隐表格列 element-ui

本文链接：https://blog.csdn.net/qq_44450612/article/details/99715181

版权

本文介绍了如何在Vue项目中利用Element-UI的Table组件，通过右键表头触发菜单，动态控制表格列的显示和隐藏。通过v-if判断列状态，并监听选中项变化来实现功能。同时分享了使用v-for优化大量列显隐的实践，强调了数据结构对应的重要性，并提供了相关参考博文链接。

摘要由CSDN通过智能技术生成

在这里插入图片描述
如图，为要实现的需求，即右键table的表头弹出菜单栏，通过勾选多选框的内容来控制表格列的显示和隐藏。

1. HTML部分（elemen-ui）：

<el-table :data="list" border fit @header-contextmenu="contextmenu">
   <el-table-column v-if="colData[0].istrue"  label="放射源ID" align="center" />
   <el-table-column v-if="colData[1].istrue"  label="源自编号" align="center" />
   <el-table-column v-if="colData[2].istrue"  label="类型" align="center" />
   <el-table-column v-if="colData[3].istrue"  label="强度" align="center" />
   <el-table-column v-if="colData[4].istrue"  label="还源人" align="center" />
</el-table>
<!--右键弹出的菜单内容-->
<!--动态计算菜单出现的位置-->
<div v-show="menuVisible" :