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

最新推荐文章于 2024-07-26 08:15:00 发布
最新推荐文章于 2024-07-26 08:15:00 发布
阅读量3.1w 收藏 42
点赞数 3
文章标签： vue 动态显隐表格列 element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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" :
最低0.47元/天 解锁文章
景严
关注
  • 3
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue动态生成表格的行和列
12-29
当在开发项目的时候，固定的页面表格标题及内容不能满足需求，需要根据不同的需求动态加载不同的表格表头和表格的内容，具体的实现代码如下： <template> <div class=boxShadow> <div xss=removed> <el data=tables ref=multipleTable tooltip-effect=dark xss=removed selection-change='selectArInfo'> <el-table-column type=selection wi
vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui ) TTable组件新增isShowHidden属性（开启列设置时动态默认显示隐藏列）
热门推荐
wocwin的博客
12-06 1万+
vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui )TTable组件新增isShowHidden属性（开启列设置时动态默认显示隐藏列）
动态显示和隐藏列的 Vue 组件 — 让你的表格“变身”！
最新发布
weixin_44692308的博客
07-26 1431
如何使用 Vue 和 Element UI 的el-table组件，打造一个动态显示和隐藏列的组件
vue+iview 动态循环表头+编辑单元格
不积跬步何以至千里
07-02 1283
先上效果图: 需求: 1.动态循环后端返回的表头 以及 表格数据 2.鼠标悬浮动态列 显示key:value 3.编辑table里的 单元格 动态循环表头 因为是后端返回表头数组 固用不了render 只能换种方式用slot动态循环显示表头 具体如下 <Table :no-data-text="$t('common.noData')" :columns="tableColumns" :data="tableData" border> <!-- 资源ID --> &l
iView组件动态控制表格列的显示与隐藏
qq_42772400的博客
05-16 803
根据当前登录用户角色动态控制是否展示业务经理查看状态列和大区经理查看状态列。列表中为金额的列，其值如果全为0则该列不展示。
vue中动态控制表格列的显示与隐藏 （优化版本，便于后期维护与修改）
qq_41186500的博客
08-20 3453
<template> <el-table :data="list" border fit @header-contextmenu="contextmenu" > <el-table-column v-if="colData[0].istrue" prop="a" l...
vue动态控制table表格列数
蓝_蓝的博客
08-25 1613
vue动态控制table表格列数
vue+elementui(table,Checkbox)实现动态控制表格列的显示和隐藏
Billow_lamb的博客
06-23 2948
vue+elementui(table,多选框)实现动态控制表格列的显示和隐藏 imdex.vue <template> <div> <div> <el-table :data="tableData" border style="width: 100%" ref="table"> <el-table-column prop="index" label="序号" width="150"> &
vue 公共组件列设置(支持显示隐藏,拖动排序)
03-22 691
首先前端数据是这样的 columnList = [ {label: '序号', prop: 'recordId', width: 100, invisible: true, state: true}, {label: '发货联系人', prop: 'shipMan', width: 100, state: true}, {label: '备注', prop: 'remarks', width: 100, state: true}, ] table表格 &lt
vue+antd中table动态隐藏显示列数据
Lucky_girl_wan的博客
09-27 2878
应用场景：table中老师、学生、年龄三列，当搜索学生时3列都显示，当搜索老师时学生列不显示，默认搜索值为学生 table中columns的数据如下： const columns = [ { title: '老师', dataIndex: 'teacher', ellipsis: true }, { title: '学生', dataIndex: 'student', ellipsis: true }, { title: '年
基于vuejs实现树形表格的封装vuetreetable
08-10
`v-if`可以用于控制节点的显示与隐藏。 5. **事件监听**： 在树形表格中，用户可能需要点击行或单元格来展开/折叠节点。为此，我们可以添加自定义事件如`@node-click`，并在父组件中处理这些事件。 6. **CSS样式*...
解放前端工程师——手把手教你开发自己的自定义列表和自定义表单系列之三表格
网尘的技术专栏
06-10 8031
前言 阅读前请按照顺序参看系列文章,效果更佳! Vue中路由到一个公共组件，然后根据路径中是否存在文件动态加载组件 解放前端工程师——手把手教你开发自己的自定义列表和自定义表单系列之一缘起 解放前端工程师——手把手教你开发自己的自定义列表和自定义表单系列之二接口 据说系列文章很难火爆，因为知识点包袱不够多，所以大家看往后不太愿意收藏， 不过没关系了， 系列文章的好处是看着舒服，碎片化时间内很快就看完了，不是吗？ 1. Common 公共页面 前面几个小节已经阐述过，如果需要完成我们的低代码列表设计，那么必然
vue实战笔记整理——用户列表小案例
Thaley的博客
01-21 447
vue实战——笔记整理——用户列表案例
Vue第一天学习总结—— Vue全家桶之Vue基础(Vue概述、Vue基本使用、Vue模板语法、基础案例——选项卡、Vue常用特性、综合案例-图书管理 )
weixin_52819925的博客
08-26 550
(一) Vue概述 我使用的vue版本是v2.5.17 1. 介绍——Vue：渐进式JavaScript框架 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue 灵活：在一个库和一套完整框架之间自如伸缩 高效：20kB运行大小，超快虚拟 DOM 框架：vue就是一个框架，提供了很多基础性服务，比如虚拟DOM技术，双向绑定技术 框架则是为解决一个(一类)问题而开发的产品 （是一个解决方案） 使用框架就不一样，我
vue实现动态控制el-table表格列的展示与隐藏
qq_22928269的博客
02-04 6532
1.引入el-table组件，这里我直接用官网的示例代码 <template> <div class="page"> <el-popover width="60" trigger="click"> <el-checkbox-group v-model="columnSelecteds"> <el-checkbox v-for="item in columnHeaders"
antd vue 自定义 table显示隐藏
qq_42670947的博客
09-17 3620
antd vue 自定义 table显示隐藏 实现思路：创建一个保存table列的属性，添加checkrd列， 拿这个数组进行渲染：如下图，给图，每一行添加点击事件，把数据与index，传下去 最后一步 循环由 点击进行改变checked进行布尔转换，就可以 根据判断布尔进行，push进入新数组，最后放进渲染的table列表。 ...
ant-desigin-vue的表格table按条件控制某些列的显示隐藏（一）
前端小攻城狮的博客
09-28 3840
本来打算可以像element的table一样，在el-table-column用v-if控制是否显示的，后面发现这样的写法好少，查看文档和百度antdesigin-vue的表格可以用v-if控制显示隐藏吗，也没看到合适的答案。就想到通过触发不同类型的事件渲染不同的column即可，那就不同控制显隐了，直接就是换了一个colums。比如我的需求是，通过改变下拉框来触发不同数组头显示。 具体效果 点击切换取值方式后，指标行信息表格的头发生随即了改变 ...
vue element ui控制表格数据显示隐藏方法
05-24
可以通过在表格的列定义中使用 `v-if` 或 `v-show` 指令来控制表格数据的显示和隐藏。 举个例子，假设我们有一个表格，其中有一个列叫做“状态”，我们想要根据不同的状态值来决定是否显示该列。我们可以这样定义该...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值