v-if控制element组件显示隐藏

最新推荐文章于 2024-03-29 10:51:24 发布
最新推荐文章于 2024-03-29 10:51:24 发布
阅读量5.6k 收藏 3
点赞数
分类专栏： vue element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40896095/article/details/115007949
版权

由于初次接触vue项目，简单记录一下
在利用element组件开发的时候遇到显示和隐藏问题
这个时候想到的是 ：

  • 利用js的三元运算计算
this.activeIndex == false ? '' : <el-table-column/>

利用这个应该是可以控制activeIndex的值来控制组件的显示与隐藏，发现不行（不知道什么原因）

  • 利用v-show
<el-table-column v-show="activeIndex"/>

利用v-show应该是可以控制activeIndex的值来控制组件的显示与隐藏，发现不行（不知道什么原因）

  • 利用v-if
<el-table-column v-if="activeIndex"/>

这次就可以。
但是不明白的是，v-show和v-if虽然控制dom的原理不同，但是都是显示和隐藏，这应该就是和组件有关，v-show其实就是css中的display来控制，v-if则是直接删除dom
博主个人小博客：嘿嘿
本文连接:点击

这个只是简单的显示隐藏，如果是页面中多个tag，只有其中一个tag显示复选框等，请移步
链接：点击

前端小蜜蜂
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementUI多个v-if控制列的显示隐藏
youxiu1111的博客
06-10 2630
标题解决elementUI中多个v-if出现表头闪动问题 elementUI中使用多个v-if 动态控制表格列（使用key时出现一瞬间的表头闪动） 解决方法 在el-table 中定义 ref="multipleTable" ； 在对v-if进行操作的方法中加入 this.$nextTick(()=>{ this.$refs.multipleTable.doLayout() })即可。 ...
elementui form表单el-form-item使用v-show控制显示隐藏，在提交时 rules 验证错误的问题
weixin_43601701的博客
06-09 9542
本篇博文深入研究了在使用Element UI构建表单时的一项常见挑战——即便表单项被隐藏，仍然会进行验证。这个问题的出现源于Vue的v-show指令。我们提出了两种创新策略和对应的代码示例来克服这个问题：首先，我们引入Vue的v-if指令来控制表单项的渲染，这样就可以避免对隐藏的表单项进行验证；其次，我们引入动态的验证规则，这样在隐藏表单项时，可以同时移除对应的验证规则。这两种方法都能有效地解决表单验证的"隐形"问题，提升了Element UI表单的性能和用户体验。这篇博文对于前端开发者来说具有很高的参考
vue源码解析——v-if和v-show各自是如何实现的元素的隐藏
最新发布
三月和九月的博客
03-29 708
在Vue.js中，v-if和v-show是常用的指令，用于控制元素的显示和隐藏。虽然它们都可以隐藏元素，但实现的方式略有不同。在这篇博客中，我们将深入探讨v-if和v-show各自是如何实现元素的隐藏的。
使用vue-cli导入Element UI组件的方法
11-30
首先第一步,现在命令行中输入npm i element-ui,如: 接着在mian.js 中添加 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 如:=> 最后在命令行输入npm run dev打开自己创建的项目就可以使用了 总结 以上所述是小编给大家介绍的使用vue-cli导入Element UI组件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
fastify-lit-element：Fastify插件以使用lit-element管理Web组件
02-06
fastify-lit-element：Fastify插件以使用lit-element管理Web组件
vue-element-utils:对 element-ui 的一些组件做的拓展自定义指令工具
08-05
vue-element-utils vue 使用 element-ui 项目的一些工具方法、拓展自定义指令等 Custom Directives 对 element-ui 的一些组件做的拓展自定义指令工具 使用yarn包管理 提供指令： v-select-scroll: Select 组件监听滚动，以便做懒加载 v-dialog-drag: Dialog 组件拖拽任意位置 v-dialog-drag-width: Dialog 组件拖拽宽度 v-dialog-corner: Dialog 组件右下角拖拽宽度高度 v-clipboard: 剪切板指令，类似 复制、Ctrl + C等复制文本至剪切板 提供原型方法： $clipboard(): 剪切板方法，类似 复制、Ctrl + C等复制文本至剪切板 How to use yarn add vue-element-utils npm inst
vue中v-show和v-if在显示和隐藏元素上的区别
weixin_30760895的博客
05-16 551
v-show将元素隐藏是在dom节点上加style=’display:none’ v-if是直接将元素完全去掉 拿v-show示例，(v-if 也是一样，把下面的代码中v-show替换成v-if即可运行) <!DOCTYPE html> <html> <head> <title></title> &lt...
elementui 之el-table通过v-if 控制按钮显示与隐藏
热门推荐
zhouzhiwengang的专栏
02-12 1万+
前端效果演示: 后端代码: <el-row> <el-table :data="tableData" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> <el-table-column prop="privilegeName" label="权限名
vue中控制element表格列的显示与隐藏
weixin_62328829的博客
10-13 6664
思路就是：我们通过vue的监听功能来监听复选框的变化，当复选框发生了变化的时候，我们看对应复选框的选中和未选中的值。选中的为true让对应的列显示、隐藏的为false让对应的列隐藏。当然因为vue是数据的双向绑定的，所以我们就让对应的列的隐藏和表格的隐藏一一对应即可。根据项目需要，需要可以动态控制表格列的显示与隐藏，如下图，复选框选中状态下为显示，为选中状态下为隐藏。
element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题
weixin_43968963的博客
12-07 2945
描述： 在el-table中使用v-if控制某些列的显示或者隐藏，当activeIndex数据发生改变时，下面这种写法会导致表格的列位置错乱，截图及代码如下： <el-table ref="multipleTable" :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize ) " tooltip-effect="dark" style="width: 100%" :row-key=" (row) =&g
vue+element 表格的列隐藏
Summer_JK的博客
10-14 2945
element表格列隐藏 有时候在同一个页面加载同一个表格，但是表格的表头字段不一样，那么我们就可以用vue的v-if指令来控制指定列的显示和隐藏，下面就是案例： 表格的相同表头字段是：序号、商品名称、排名、商品价格、评价数、评价率及操作，只有商品图片是不一样的，所以我们可以给商品图片这个字段添加v-if指令来控制他是否展示，下面是代码： HTML： <el-table-column prop="images" align="center" label="商品图片" v-if="s
v-shared-element:Vue.js的声明式共享元素转换
03-09
指数安装npm $ npm i v-shared-element 或者CDN < script src =" https://unpkg.com/illusory " > </ script >< script src =" https://unpkg.com/v-shared-element " > </ script >注册...
Vue element-ui父组件控制子组件的表单校验操作
10-15
主要介绍了Vue element-ui父组件控制子组件的表单校验操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于element-ui的隐藏组件el-scrollbar的使用
10-16
主要介绍了关于element-ui的隐藏组件el-scrollbar的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue基础（一）：指令概念（内容、属性、事件、双向绑定、条件、列表）
欢迎来到长风沛雨的博客
11-16 1218
学了vue的指令内容，六种指令的分类概念，筛选一些关于指令的内容记录一下。
使用vue实现图片的显示和隐藏
m0_69775127的博客
03-20 822
v-if和v-show：v-if用来控制元素显示和隐藏，属性为布尔值。v-show可以实现与v-if同样的效果，但是v-show是操作元素的display属性，而v-if会对元素进行删除和重新创造，所以v-if在性能上不如v-show。v-show会取v-show的反向指令，出现隐藏效果）组件：在vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写，提高开发效率，降低代码之间的耦合程度，使项目更易维护和管理。v-for：可以实现页面列表渲染，常用来循环数组。
Vue+Element UI Upload 组件 上传单张图片去除后面的+号
超级小东的博客
12-03 5301
这个思路是隐藏 el-upload–picture-card” 我是在钩子函数 上传中、上传成功、上传失败、预览这些地方进行控制。这样在上传中那个"+"号也可以马上隐藏 上传组件代码块 <el-form-item label="产品图片:" size="mini"> <el-upload action="上传接口" :limit="1" :on-pr...
4.1.5 vue的条件渲染指令
XGM__的博客
12-30 73
v-if 和 v-show 条件渲染指令，按需控制DOM元素的显示与隐藏，则是符合条件的DOM元素则显示，不符合则隐藏
element-ui el-upload(上传组件) 上传图片后，隐藏上传按钮
qq_17627195的博客
11-09 4133
element-ui el-upload(上传组件) 上传图片后，隐藏上传按钮
el-table用v-if控制表头的显示与隐藏
06-03
在 Element UI 中，可以使用 `v-if` 指令来控制 `el-table` 组件表头的显示与隐藏。具体步骤如下： 1. 在 `el-table` 组件中使用 `v-if` 指令控制表头的显示与隐藏，例如： ```html <el-table :data="tableData" v-if="showTable"> <!-- 表头部分 --> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <!-- 表内容部分 --> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="status" label="状态"></el-table-column> </el-table> ``` 2. 在 `data` 中定义 `showTable` 数据，用于控制 `el-table` 组件的显示与隐藏。例如： ```javascript data() { return { tableData: [...], showTable: true } } ``` 3. 在需要的时候修改 `showTable` 数据的值即可控制 `el-table` 组件的显示与隐藏。例如： ```javascript // 隐藏表格 this.showTable = false; // 显示表格 this.showTable = true; ``` 注意，当 `el-table` 组件的数据源为空时，表头会自动隐藏，此时无需使用 `v-if` 指令控制表头的显示与隐藏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值