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

最新推荐文章于 2024-07-25 13:37:54 发布
最新推荐文章于 2024-07-25 13:37:54 发布
阅读量5.3k 收藏 5
点赞数 5
分类专栏： js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30596783/article/details/121037273
版权
在Vue的Element UI框架中，当使用table组件并尝试通过v-show控制表格列的显示时，由于display: table-cell的优先级高于display: none，导致v-show失效。为解决这个问题，需要改用v-if。在切换DOM时，由于相同标签无法被正确识别，需要在td标签上添加key值以确保唯一性。最终解决方案是根据type状态使用v-if条件渲染不同的table-column。
摘要由CSDN通过智能技术生成

今天同事在开发中遇到一个问题，就是使用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>

代码研究员
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vue表格显示问题：v-show无法影响el-table-column列的解决方案
七一
01-30 3023
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控制隐藏。
【专题】（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...
element-ui动态设置tabel列时,无效果,表头抖动,表格错乱,值不能正常展示等问题
最新发布
DecorateCC的博客
07-25 329
踩坑日记：最近用element-ui做一个动态列（频繁隐藏显示列）的表格踩坑记录下：1、在el-table-column上使用v-show绑定是无效果2、el-table-column几次切换显示/隐藏后，发现表格的排版完全乱了,或者值不能正常展示3、表格头抖动。
v-show在elementui中表格组件失效问题
qq_40668646的博客
04-02 1204
这里定义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.
elementUI tabale表格中 table-column v-show失效
weixin_44076775的博客
08-21 2560
产品要求表格中有的列可以控制出现和隐藏，想到了用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失效了 ...
v-show控制el-table中的列不生效
MISS_zhang_0110的博客
09-23 1638
列表中有一列是内容，内容不同点击弹框，弹框出现的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失效；
element-ui动态v-show设置tabel列时,无效果，v-if设置时值会错位
cxz
05-31 1483
1、element-ui动态v-show设置tabel列时,无效果，2、v-if设置时，值会错位。
v-show控制el-table-colunm不生效
weixin_47272275的博客
06-27 3795
在使用el-table的时候，遇到对el-table-column显示与隐藏的控制时，使用v-show不生效，使用v-if样式不对。v-show起作用的本质是display:none，而因为td的display: table-cell；权限高于display:none，所以v-show失效；v-if切换标签显示隐藏时，多个相同的标签被渲染，需要使用key来区分，否则就会出现多个复用...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
总结来说，当在 `el-tab-pane` 中使用 `v-show` 或 `v-if` 遇到问题时，可以考虑以下几点： 1. 理解 `v-show` 和 `v-if` 的工作原理及其与组件内部实现的交互。 2. 使用 `v-if` 代替 `v-show`，尽管这可能会导致性能...
element-ui tabs隐藏某个标签（v-show不起作用的解决方法）
TUTsmile的博客
08-19 4049
文章目录解决方法v-show 为什么不起作用呢 解决方法 直接展示代码，代码如下所示 <template> <div id="app"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in elTabs" :key="index" :label="item.label" :name="item.name"&gt
解决swiper在Element-ui的tabs标签页切换时，swiper不生效，以及v-if和v-show不生效，还有左右箭头切换按钮点击无效的情况。
weixin_46180637的博客
08-03 1912
解决swiper在Element-ui的tabs标签页切换时，swiper不生效，以及v-if和v-show不生效，还有左右箭头切换按钮点击无效的情况。
el-table-column使用v-for展示数据，＜template #defalut=“scope“＞不生效
weixin_45563717的博客
08-12 6336
el-table-column使用v-for展示数据，针对展示需要处理的数据使用平常的不生效该如何解决
在使用el-table-column的时候，发现v-show不会起作用
qq_35440907的博客
04-20 3803
<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的el-table-column组件不支持v-show指令
qq_38122800的博客
04-23 1198
在vue中想通过v-show控制element-ui中的el-table显示隐藏某一列，但是不起作用。
v-show无效，v-if有效的影响
qq_41442428的博客
05-20 1972
v-if的作用：通过控制Dom节点的存在与否 v-show的作用是：控制元素的显隐，设置dom元素的display的样式 他们两者的区别就是是否影响性能方面， 如果经常性用到了切换，就需要用v-show 如果是偶尔性的切换，那就用v-if 但按照常理来说，不考虑性能方面，我们一般能用v-if也一定可以用到v-show 但最近小编在撸代码的过程中，遇到了一个神奇的事 我用了element ui中的table组件，有两列是要进行点击切换显隐的。如图 用了v-show失效，奇怪，后来发现，原来是因为v-show
element ui中table的v-show失效，但是v-if正常
吃瓜群众的博客
07-15 5678
v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题？
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
01-17 1434
最近开发项目时，在 el-tab-pane 标签上使用 v-show，即使v-show的值为 false，el-tab 的标签仍然展示。即使将v-show加在 slot 子节点上，也会显示 tab 的背景图和 close 图标；如下图：所以针对该问题，各种方案做了一个尝试，下面做一个总结，希望对你有帮助。
vue中tab隐藏display:none（v-show无效，v-if有效）
luemeon的博客
07-28 1448
编译前和运行时标签不同。
el-table 使用v-if
07-27
el-table 使用v-if是为了控制某些列的显示或隐藏。在引用\[1\]中的代码中，v-if被用来判断taskDetailsData.handleState的值，如果为0，则显示type为selection的列，否则隐藏该列。同样地，v-if也被用来判断taskDetailsData.handleState的值，如果不为0，则显示label为"素材是否合格"的列，否则隐藏该列。这样可以根据不同的条件动态地显示或隐藏列。在引用\[2\]中的代码中，也是使用了类似的方式来控制列的显示或隐藏。通过使用v-if，可以根据不同的条件来灵活地控制el-table中的列的显示与隐藏。 #### 引用[.reference_title] - *1* *2* [element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题](https://blog.csdn.net/weixin_43968963/article/details/121767733)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue+element-ui中的el-table-column使用v-if导致位置错乱的现象](https://blog.csdn.net/zhgweb/article/details/127653200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

代码研究员

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

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

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

打赏作者

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

抵扣说明：

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

余额充值