vue中动态控制表格列的显示与隐藏（优化版本，便于后期维护与修改）

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

封小荷

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

阅读量3.4k

点赞数 2

文章标签： vue 表格自定义菜单列的显示与隐藏

本文链接：https://blog.csdn.net/qq_41186500/article/details/99738898

版权

本文介绍了如何在Vue项目中优化element-ui表格，实现动态控制列的显示与隐藏。优化后，添加或调整列只需修改data中的表头数组，提高了代码的可维护性。通过在表格部分使用v-if判断，并在JavaScript中管理表头，实现了更简洁的实现方式。

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

在这里插入图片描述
这边是没优化之前的代码，表格部分代码量稍微有点多，写法有点繁琐

element-ui部分
header-contextmenu是element-ui提供的方法，点击表头时触发

<template>
      <el-table
        :data="list"
        border
        fit
        @header-contextmenu="contextmenu"
      >
      // prop:字段名   label：表头单元格内容
        <el-table-column v-if="colData[0].istrue" prop="a" label="A" align="center" />
        <el-table-column v-if="colData[1].istrue" prop="b" label="B" align="center" />
        <el-table-column v-if="colData[2].istrue" prop="c" label="C" align="center" />
        <el-table-column v-if="colData[3].istrue" prop="d" label="D" align="center" />
        <el-table-column v-if="colData[4].istrue" prop=