vue+elementUI配置表格的列显示与隐藏

最新推荐文章于 2024-06-05 15:34:38 发布
最新推荐文章于 2024-06-05 15:34:38 发布
阅读量1.6w 收藏 46
点赞数 9
分类专栏： 前端 文章标签： javascript elementui 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_xiao_ye/article/details/119786627
版权

vue+elementUI配置表格的列显示与隐藏

描述：
表格的列过多时，可以根据需要控制列的显示与隐藏，目前是采用Vue+elementUI（适配Vue3的Element Plus）实现的，具体效果与代码如下：
效果图：
在这里插入图片描述

完整代码：

<template>
  <div id="app">
    <el-table :data="tableData" border style="width: 100%" ref="table">
      <el-table-column
        fixed
        type="index"
        align="center"
        :index="1">
        <template #header>
          <el-popover
            placement="bottom"
            :width="600"
            :visible="visible"
          >
            <!-- 配置列面板 -->
            <transition name="fade">
              <div>
                <div>选择显示字段</div>
                <div>
                  <el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox>
                  <el-checkbox v-model="showColumn.name">姓名</el-checkbox>
                  <el-checkbox v-model="showColumn.provinces">省份</el-checkbox>
                  <el-checkbox v-model="showColumn.city">市区</el-checkbox>
                  <el-checkbox v-model="showColumn.adreess">地址</el-checkbox>
                  <el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox>
                </div>
              </div>
            </transition>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button size="mini" type="primary" plain @click="saveColumn">确定</el-button>
            </div>
            <template #reference>
              <i
                class="el-icon-setting"
                style="font-size: 22px; cursor: pointer"
                @click="visible = true"
              ></i>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="150"
        v-if="showColumn.date"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
        v-if="showColumn.name"
      >
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份"
        width="120"
        v-if="showColumn.provinces"
      >
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区"
        width="120"
        v-if="showColumn.city"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        minWidth="300"
        v-if="showColumn.adreess"
      >
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编"
        width="120"
        v-if="showColumn.zipCode"
      >
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100" align="center">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
      // 列的配置化对象，存储配置信息
      showColumn: {
        date: true,
        name: true,
        provinces: true,
        city: true,
        adreess: true,
        zipCode: true,
      },
    };
  },
  mounted() {
    // 发请求得到showColumnInitData的列的名字
    if(localStorage.getItem("columnSet")){
      this.showColumn = JSON.parse(localStorage.getItem("columnSet"))
    }else{
      this.showColumn = {
        date: true,
        name: true,
        provinces: true,
        city: true,
        adreess: true,
        zipCode: true,
      };
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    saveColumn() {
      localStorage.setItem("columnSet",JSON.stringify(this.showColumn))
      this.visible = false;
    },
  },
};
</script>

<style lang="postcss" scoped>
/* 控制淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

问题：
1、可以简单实现，但最好的方法是列的全部字段也通过配置实现；
2、elementUI的popover嵌套在table里使用时，会出现面板的显示bug，例如本文是采用:visible=“visible”，如果按照正常双向绑定v-model:visible=“visible”，则会出现弹窗闪现的现象，弹出后会立马关闭；
现象：
在这里插入图片描述

原因猜想：
v-model:visible=“visible”，会自动触发遮罩层关闭，置visible变为false（watch监听visible，点击弹出按钮时，visible变为true后会立马变为false）；
3、如果某一列设置minWidth属性，如果隐藏该列，则popover会出现弹出两个窗口的异常现象，例如“地址”列：
在这里插入图片描述

故可采用dialog来实现：

<template>
  <div id="app">
    <el-table :data="tableData" border style="width: 100%" ref="table">
      <el-table-column
        fixed
        type="index"
        align="center"
        :index="1">
        <template #header>
          <i
            class="el-icon-setting"
            style="font-size: 22px; cursor: pointer"
            @click="visible = true"
          ></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="150"
        v-if="showColumn.date"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
        v-if="showColumn.name"
      >
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份"
        width="120"
        v-if="showColumn.provinces"
      >
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区"
        width="120"
        v-if="showColumn.city"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        minWidth="300"
        v-if="showColumn.adreess"
      >
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编"
        width="120"
        v-if="showColumn.zipCode"
      >
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100" align="center">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="字段配置" v-model="visible">
      <transition name="fade">
        <div>
          <div>选择显示字段</div>
          <div>
            <el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox>
            <el-checkbox v-model="showColumn.name">姓名</el-checkbox>
            <el-checkbox v-model="showColumn.provinces">省份</el-checkbox>
            <el-checkbox v-model="showColumn.city">市区</el-checkbox>
            <el-checkbox v-model="showColumn.adreess">地址</el-checkbox>
            <el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox>
          </div>
        </div>
      </transition>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="saveColumn">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

效果：
在这里插入图片描述

W2andye
关注
  • 9
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vue3 el-table实现列筛选功能，控制列的显示和隐藏（简单粗暴）
weixin_48853103的博客
03-30 2821
vue3 el-table实现列筛选功能
vue+element 表格的列隐藏
Summer_JK的博客
10-14 2970
element表格列隐藏 有时候在同一个页面加载同一个表格，但是表格的表头字段不一样，那么我们就可以用vue的v-if指令来控制指定列的显示和隐藏，下面就是案例： 表格的相同表头字段是：序号、商品名称、排名、商品价格、评价数、评价率及操作，只有商品图片是不一样的，所以我们可以给商品图片这个字段添加v-if指令来控制他是否展示，下面是代码： HTML： <el-table-column prop="images" align="center" label="商品图片" v-if="s
vue+element UI实现table增加隐藏列操作
qq_32166301的博客
05-11 1400
这里是在表格中增加了一个操作入口，以弹窗的方式展示出来你所要操作的列。在table中增加v-if。
VUE2/3:element ui table表格的显隐列（若依框架）
weixin_47194802的博客
01-11 4891
若依框架自带一个组件，封装了关于表格，展示和隐藏表格列的功能；使用效果就是这样的，在表格上面，三个框，从左到右分别是隐藏上面搜索，刷新列表，和显隐列的功能；
antd vue 隐藏table组件中columns的某一列
最新发布
jiangchenW的博客
06-05 349
近日在项目开发过程中，测试给咱提了个bug，说是table列表不需要展示id值，用户不需要看这个数据。说明display 只能隐藏对应的内容，并不能把对应列也隐藏，位置依然还在。我心想：id是我用来跳转详情页的时候拿数据用的，又不是给用户看的。但是官网文档查了一圈，没看到有类似hidden这样的属性啊。id列肯定是要的，只需要把它隐藏起来就好了。一不做二不休，上css，添加类名，设置。提都提了，那就试试能不能解决吧。，官网描述如下：应该能解决问题。
element-ui 中的table的列隐藏问题解决
10-18
主要介绍了element-ui 中的table的列隐藏问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ElementUI的el-table隐藏id列
Vivian的博客
08-04 5507
使用场景： 使用el-table进行数据的展示时，查询数据时要获取对象的ID属性，在展示时不需要展示ID这一列，但是在进行编辑时需要获取该ID。 实现方法： 可以通过在el-table-column上添加 v-if="false" 完整示例代码： <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange"> <el
ElementUI的el-table怎样隐藏某一列
BADAO_LIUMANG_QIZHI的博客
07-29 3万+
场景 使用el-table进行数据的展示时，某些列不需要展示，但是需要其存在。 比如查询数据时要获取对象的ID属性，在展示时不需要展示ID这一列， 但是在进行编辑时需要获取该ID。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 可以通过在el-table-column上添加 v-if="false" 来实现 完整示例代码 <el-table v-...
el-table控制列的显示与隐藏
weixin_42375707的博客
06-24 2万+
el-table控制列的显示与隐藏
vue element ui table表格--实现列的显示与隐藏
王二的博客
01-09 5738
vue element ui table表格 -- 实现列的显示与隐藏
vue 使用element-ui实现table表单列展示与隐藏
热门推荐
FREE-FLY的博客
09-30 8万+
详细代码： github上查看方式 查看窗口 在公司做vue 动态设置element中table表单列的展示方式，点击复选框选中时，表单对应的显示，补选中时，隐藏，因为在网上找相关案例，没有一个比较合适的解决方法，所以自己按照自己的方法去实现此相关功能，希望对大家有帮助。 页面table表单对应的展示与隐藏 首次默认把需要展示的数据保存到浏览器的localstroang中 ...
vue+elementUI实现动态表格合并单元格.zip
09-26
- `v-if` 或 `v-show` 指令可以用来控制表格行或单元格的显示与隐藏，实现增删行的功能。 2. **Element UI**： - Element UI 提供了丰富的表格组件 (`<el-table>`)，可以直接在 Vue 应用中使用，简化了表格的创建...
vue + element-ui实现按钮和权限管理动态路由
01-18
在本文中，我们将深入探讨如何使用Vue.js框架与Element-UI库来实现一个包含按钮和权限管理的动态路由系统。这个系统是针对后台管理场景设计的，具备高度可复用性和便捷性，使得开发者能够快速搭建起具有权限控制功能...
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
10-17
在表格列的模板中，我们将结合Vue的`v-if`或`v-show`指令来切换显示文本内容还是输入框。这里使用CSS类来控制显示隐藏，例如，当表格行被选中时，输入框显示，原始文本隐藏： ```html 日期" width="180"> v-if...
vue-elementui-admin
03-20
例如，使用`v-for`指令来循环渲染列表数据，使用`v-if`或`v-show`控制元素的显示与隐藏，以及使用`computed`来处理复杂的计算逻辑。 在实际运行项目前，确保已经安装了Node.js，并且版本为16。Node.js不仅提供了...
Element + Vue 封装的table组件
12-07
在封装过程中，开发者可能已经对这些功能进行了优化，例如提供更灵活的列配置，允许用户动态设置列的显示、隐藏、宽度等属性，以及自定义列头和单元格的内容。 `el-pagination`是Element UI中的分页组件，用于展示...
vue element ui实现隐藏列
weixin_41294419的博客
08-03 2245
vue element ui实现隐藏列 <el-table-column v-for="col in columnDefs" :key="col.prop" :label="col.label" align="center" :show-overflow-tooltip="col.showOverflowTooltip"> <template slot-scope="{row}"> <span>{{ row[
自定义列的隐藏和显示
weixin_52268321的博客
04-12 930
自定义列的隐藏和显示遇到的问题
Vue+Element UI表格列的显示和隐藏
yhj198927的博客
04-06 5615
如下代码： <template> <div> <el-table :data="tabledate" height="400" > //使用v-if else 控制两列的显示和隐藏，每个列必须加唯一标识符:key="Math.random()"，否则会不起作用，无法控制显示与隐藏 <el-table-column type="selection" width="50" v-if="showCol
vue+elementui 打印表格不显示表格边框线
09-23
### 回答1： 如果 Vue 项目使用了 Element UI 组件库中的 Table 组件打印表格时不显示表格边框线，可以通过在 CSS 中覆盖样式来解决。 可以在项目中新建一个 CSS 文件，如 `print.css`，在该文件中添加如下样式： ``` /* 表格边框 */ table { border-collapse: collapse; border: 1px solid black; } /* 表格内容边框 */ td, th { border: 1px solid black; } ``` 然后在你打印表格的页面的 head 标签内加入 ``` <link rel="stylesheet" type="text/css" href="print.css" media="print"> ``` 如果你使用vue-cli那么也可以在vue.config.js的配置里面加入 ``` chainWebpack: config => { config.plugin("html").tap(args => { args[0].meta.push({name: 'link', content: 'print.css', media: 'print'}); return args; }); } ``` 这样打印出来的表格就会显示出边框了。 ### 回答2： 在Vue和ElementUI中，如果打印表格时不显示表格边框线，可以通过以下几种方法解决： 1. 使用CSS样式控制：可以在打印时为表格设置特定的样式，如下所示： ```css <style> @media print { .el-table { border-collapse: collapse; border: 1px solid #000; } .el-table th, .el-table td { border: 1px solid #000; } } </style> ``` 该样式将在打印时将表格的边框线设置为1像素宽的黑色线条。 将上述代码放在需要打印表格的页面的样式部分，这样在打印时就会显示表格的边框线。 2. 使用ElementUI自带的打印样式：ElementUI提供了一个打印样式，可以直接使用它来显示表格边框线。只需在打印时添加一个`el-table-print`的class，如下所示： ```html <el-table class="el-table-print" :data="tableData" style="width: 100%"> <!-- 表格内容 --> </el-table> ``` 这样在打印时，表格就会显示边框线。 需要注意的是，使用此方法时，不需要手动设置边框样式，ElementUI会自动应用默认的边框样式。 3. 通过打印设置调整：在打印预览页面中，大部分浏览器都提供了打印设置选项，可以在其中选择打印边框。具体操作可以参考浏览器的打印设置说明。 以上就是解决Vue和ElementUI中打印表格不显示边框线的几种方法，可以根据实际需求选择其中一种方式来解决该问题。 ### 回答3： 在vue elementUI中，打印表格不显示表格边框线的问题，可以通过以下两种方法来解决： 1. 使用自定义样式：可以在打印样式中添加自定义的CSS样式来显示表格的边框线。在打印时，可以通过媒体查询@media print来应用该样式。例如： ```css @media print { .el-table__body::-webkit-scrollbar { display: none; /* 隐藏滚动条 */ } /* 显示表格边框线 */ .el-table__body, .el-table__header-wrapper, .el-table__fixed-header-wrapper { border: 1px solid #000; } .el-table__row { border-bottom: 1px solid #000; } .el-table__row--hover { background-color: #f5f5f5; /* 鼠标悬停行背景色 */ } .el-table__header { border-bottom: 1px solid #000; } } ``` 2. 使用打印插件：可以使用一些专门用于打印的插件来解决该问题，例如`print-js`插件。该插件可以在打印时保持元素的样式，包括表格的边框线。首先，在项目中安装`print-js`插件： ```bash npm install print-js --save ``` 然后，在需要打印的组件中引入`print-js`插件，并在打印按钮的点击事件中调用相应的方法： ```html <template> <div> <el-button @click="printTable">打印表格</el-button> <el-table ref="table"> <!-- table content --> </el-table> </div> </template> <script> import printJS from 'print-js'; export default { methods: { printTable() { const tableElement = this.$refs.table.$el; // 获取表格DOM元素 printJS(tableElement.innerHTML); // 打印表格 } } } </script> ``` 使用上述方法之一，你就可以在打印时显示表格的边框线了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值