Element中table使用v-show不生效，使用v-if生效

最新推荐文章于 2024-04-23 18:16:20 发布
原创 最新推荐文章于 2024-04-23 18:16:20 发布 · 6k 阅读 · 5
标签
#vue
在Vue的Element UI框架中，当使用table组件并尝试通过v-show控制表格列的显示时，由于display: table-cell的优先级高于display: none，导致v-show失效。为解决这个问题，需要改用v-if。在切换DOM时，由于相同标签无法被正确识别，需要在td标签上添加key值以确保唯一性。最终解决方案是根据type状态使用v-if条件渲染不同的table-column。

今天同事在开发中遇到一个问题，就是使用table中的type控制表格中两列，其中一列显示另一列则隐藏，同时位置有所改变，在切换tab中，发现一个bug就是tab切换到第二次的时候，显示是对的但是位置发生了变化。

当时我感觉频繁操作建议让他改成v-show，结果发现没生效，主要是因为table中的td，diplay:table-cell,权限高于display:none,导致v-show失效。

后面只能改成v-if,考虑到dom操作过程中，无法识别相同dom标签,导致重复使用td,需要对标签添加key值做唯一标识。

最终解决方案如下：

<el-table-column key="0" label="解决问题" prop="tableData.date1" v-if="type===0"></el-table-column>

<el-table-column key="1" label="等待解决问题"  prop="tableData.date2" v-if="type！==0"></el-table-column>

别再只用v-if了！Element Table动态列更优雅的三种方案：key、v-show与计算属性
最新发布
weixin_27033895的博客
04-24 172
本文探讨了Element Table动态列显隐的三种进阶方案：key属性绑定法、v-show显示控制法和动态column配置。通过性能优化和架构设计，解决了使用v-if时常见的数据错位和性能损耗问题，适用于企业级前端应用中的复杂场景。
v-show在elementui中表格组件失效问题
qq_40668646的博客
04-02 1405
这里定义showType值为1 v-show="showType == ‘0’"应该为false，不显示才对，但是结果是显示出来了 但是用v-if就不会显示，这是什么原因呢？ 网上找到的答案如下： v-showzuomg-blog.csdnimg.cn/20210402094702567.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ.
Element UI的el-table-column组件不支持v-show指令
qq_38122800的博客
04-23 2459
在vue中想通过v-show控制element-ui中的el-table显示隐藏某一列，但是不起作用。
v-show控制el-table-colunm不生效
weixin_47272275的博客
06-27 4382
在使用el-table的时候，遇到对el-table-column显示与隐藏的控制时，使用v-show不生效，使用v-if样式不对。v-show起作用的本质是display:none，而因为td的display: table-cell；权限高于display:none，所以v-show失效；v-if切换标签显示隐藏时，多个相同的标签被渲染，需要使用key来区分，否则就会出现多个复用...
element-ui动态设置tabel列时,无效果,表头抖动,表格错乱,值不能正常展示等问题
指尖笑
07-20 5063
踩坑日记： 最近用element-ui做一个动态列（频繁隐藏显示列）的表格踩坑记录下： 1、在el-table-column上使用v-show绑定是无效果 2、el-table-column几次切换显示/隐藏后，发现表格的排版完全乱了,或者值不能正常展示 3、表格头抖动 原因分析： 1、v-show绑定无效果的原因： v-show起作用的本质是利用display:none控制隐藏，el-table-column的td是利用了display: table-cell 控制显示，而display：table-c
在使用el-table-column的时候，发现v-show不会起作用
qq_35440907的博客
04-20 4041
<el-table-column v-if="editType === 'final_leader'" prop="final_leader" label="管理合伙人确认" header-align="center" align="center" width="200"> <template> <el-table-column v-for="(single, index) of selfData" :label="s...
element ui 中 tabs 标签页使用 v-show 隐藏标签失效
agyyl0的博客
07-20 1898
碰到一个需求，需要隐藏 element-ui 中 tabs 里的 tab 标签页，为了不影响其他功能，必须使用 v-show，这是发现 v-show 隐藏失败，但是换成 v-if 成功了，最终发现，el-tab 标签的 v-show 并没有直接作用到 tab 标签的标签头 header 本身，而是作用到内部的元素，造成的结果是，标签还在，但点击打开之后的内容没有了。后来直接的解决办法，直接给需要隐藏的标签加上类名，直接写 css 隐藏掉了。 类似的，table 的 复选框 列，要隐藏表头时，表头使用 te
elementUI el-table 表格的 slot-scope=“scope“插槽不生效的解决方案
qq_42177787的博客
05-27 9424
element UI el-table 表格的 slot-scope="scope"插槽不生效 >>>>>>转载文章<<<<<< ** Tips：解决方案，戳我直达~ ** 问题描述：Element-ui的表格内 插槽不生效 // 不生效的插槽是这样的 <el-table-column align="center" prop="position" width="270" label="位置"> &
使用v-show不起作用的原因有哪些-
sea
08-20 6632
使用v-show不起作用的原因有哪些- 实践： 如果是组件之类的，用v-if更好一些，如果是一些暂时性隐藏，一会要显示的,还是v-show更方便。 问题： <el-table-column align="center" label="操作" width="150" v-if="selectPT==='***'"> <template slot-scope="scope"> <el-button size="small" type="primary"
【专题】（vue+element-ui）动态设置tabel列的显示与隐藏
热门推荐
鲁宽宽的博客
08-30 5万+
不得不说，百度很强大，只要搜索饿了么怎么动态设置列会得到很多答案； 1、v-show(不生效)：v-show直接绑定,得到的结果很意外，哈哈，不起作用，饿了么对v-show不感冒； 2、v-if()：此方法确实可以控制显示与隐藏；不过分情况使用： &gt;&gt;a:  element组件 el-table-column &lt;el-table-column v-if="colDa...
el-table-column使用v-for展示数据，＜template #defalut=“scope“＞不生效
weixin_45563717的博客
08-12 6697
el-table-column使用v-for展示数据，针对展示需要处理的数据使用平常的不生效该如何解决
v-show无法隐藏el-table-column列
Study123wf的博客
09-29 2367
v-show无法隐藏el-table-column
v-show控制el-table中的列不生效
MISS_zhang_0110的博客
09-23 2403
列表中有一列是内容，内容不同点击弹框，弹框出现的el-table中列不同，控制不同弹框显示不同的列，如果用v-if可以实现，用v-show不行。v-if切换标签显示隐藏时，多个相同的标签被渲染，需要使用key来区分，否则就会出现多个复用的情况。而因为td的display: table-cell；权限高于display:none，v-show起作用的本质是display:none，后台管理系统vue2.0+element-ui。所以v-show失效；
Vue表格显示问题：v-show无法影响el-table-column列的解决方案
七一
01-30 4125
element-ui table组件el-table-column的td是利用了display: table-cell 控制显示。采用v-if的方式进行解决，但这样会伴随一个问题，可能会导致表格样式错乱，可以给每一列加入一个key即可。而display：table-cell的优先级又高于display：none，所以v-show失效。当我们在想对表格的某一列进行隐藏的时候，采用了v-show进行隐藏，但是发现似乎隐藏不了。v-show起作用的本质是利用display:none控制隐藏。
element ui中table的v-show失效，但是v-if正常
吃瓜群众的博客
07-15 5765
v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效
element-ui动态v-show设置tabel列时,无效果，v-if设置时值会错位
cxz
05-31 1774
1、element-ui动态v-show设置tabel列时,无效果，2、v-if设置时，值会错位。
前端Element-UI中show-overflow-tooltip属性不生效
记录每一个不可被遗忘的代码
06-16 9967
el-table表格中设置show-overflow-tooltip属性,鼠标悬浮后，tooltip文本提示内容不显示
ElementUI中的el-tab-pane组件使用v-show不生效的问题
前端笔记——放弃很容易,但坚持一定很酷
07-15 3700
在el-tab-pane标签上使用v-show，即使v-show的值为false，el-tab的标签仍然展示。即使将v-show加在slot子节点上，也会显示tab的背景图和close图标；this.$refs.tabs.$children[0].$refs.tabs获取到的值：所有tab页签dom元素的集合。注意观察tab的dom结构，你会发现el-tab-pane会生成一个唯一id，id的值就是tab-加上name属性的值。但是有些场景下不适合使用v-if，比如切换比较频繁，并且需要保留之前的状态等。
Vue 中 el-tab-pane组件 使用v-show不生效问题
Aren的博客
07-06 3788
Vue 中 el-tab-pane 使用v-show不生效问题 在开发中遇到一个需求，需要根据是否有权限来显示和隐藏 tab页，一开始想使用v-if 来做到隐藏和显示 可是遇到了两个问题 父组件有部分依赖了子组件的值，所以需要组件的refs 里有值，但是由于v-if的惰性，可能还没有出现 ，在computed中已经开始访问 子组件里 的属性了，这时候就会报错 由于会频繁的需要展示和隐藏 这个tab，这时候v-if就会导致对于性能造成不必要的浪费 于是转而使用v-show 却发现无论变量如何改变都不会
elementUI tabale表格中 table-column v-show失效
weixin_44076775的博客
08-21 2854
产品要求表格中有的列可以控制出现和隐藏，想到了用v-if 或者用 v-show 控制table-column，但实际是v-if有效，v-show无效，主要是elementUI 的table 中的table-column 里面用了display：table-cell，而v-show用的是display：none控制显示，display：table-cell的优先级高于display：none，所以v-show失效了 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码研究员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值