element ui中table的v-show失效，但是v-if正常。使用v-if来控制列的显示隐藏 出现列位置错乱问题

最新推荐文章于 2024-05-16 14:40:59 发布
最新推荐文章于 2024-05-16 14:40:59 发布
阅读量1.1k 收藏 6
点赞数 5
分类专栏： vue 文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37173454/article/details/127547107
版权

element,控制table列显隐v-show失效，但是v-if正常

v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效

element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题

在这里插入图片描述

1.key值是随机数，添加列或者修改列顺序时,写上:key=Math.random()就行，但是渲染时列表会出现一瞬间的晃动
2.key写固定值，不会出现晃动的瑕疵，但是修改key值麻烦

萨缪尔森asd
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element中table使用v-show不生效，使用v-if生效
Only No.1
10-29 5190
今天同事在开发中遇到一个问题，就是使用table中的type控制表格中两列，其中一列显示另一列则隐藏，同时位置有所改变，在切换tab中，发现一个bug就是tab切换到第二次的时候，显示是对的但是位置发生了变化。 当时我感觉频繁操作建议让他改成v-show，结果发现没生效，主要是因为table中的td，diplay:table-cell,权限高于display:none,导致v-show失效。 后面只能改成v-if,考虑到dom操作过程中，无法识别相同dom标签,导致重复使用td,需要对标签添加ke
ElementUI中的el-tab-pane组件使用v-show不生效的问题
前端笔记——放弃很容易,但坚持一定很酷
07-15 2463
在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，比如切换比较频繁，并且需要保留之前的状态等。
vue3常见问题
最新发布
Pluto_ssy的博客
05-16 1136
在使用Vue3的过程中可能经常会遇到这几个Bug，本文详细介绍了这几个bug出现的原因，以及给出相应的解决方法，值得收藏，预防丢失！！！
element-ui动态v-show设置tabel列时,无效果，v-if设置时值会错位
cxz
05-31 1411
1、element-ui动态v-show设置tabel列时,无效果，2、v-if设置时，值会错位。
Vue表格显示问题：v-show无法影响el-table-column列的解决方案
七一
01-30 2917
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控制隐藏。
Vue2+ElementUI学习笔记——v-show
Ultra_SevenX的博客
04-13 415
Vue2+ElementUI学习笔记——v-show
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
`v-show` 和 `v-if` 都是 Vue 中的条件渲染指令，它们的主要区别在于渲染策略：`v-if` 会根据条件决定是否编译元素，而 `v-show` 则始终编译元素，只是通过改变 CSS 的 `display` 属性来控制显示与隐藏。然而，当...
element-ui 中的table的列隐藏问题解决
10-18
主要介绍了element-ui 中的table的列隐藏问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用 Element UI Table 的 slot-scope方法
10-16
此时，我们可以使用条件渲染指令 `v-if` 和 `v-else-if` 来处理多种情况： ```html <el-table-column label="状态"> <template slot-scope="scope"> <el-tag v-if="scope.row.state === '已完成'" :type="'...
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
10-17
主要介绍了Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui表格列金额显示两位小数的方法
10-18
在本文中，我们将深入探讨如何在Element-UI的表格组件中显示金额并确保金额始终保留两位小数。这在金融或者商务类应用中尤为重要，因为精确的数字展示能确保数据的准确性。 首先，我们需要理解Element-UI的`el-...
Element el-table 表格列 v-if 显示 隐藏 样式错乱的问题
weixin_50912789的博客
10-21 1934
Element el-table 表格列 v-if 显示 隐藏 样式错乱的问题
element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题
weixin_43968963的博客
12-07 3035
描述： 在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
v-show控制el-table中的列不生效
MISS_zhang_0110的博客
09-23 1466
列表中有一列是内容，内容不同点击弹框，弹框出现的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失效；
v-show控制el-table-colunm不生效
weixin_47272275的博客
06-27 3736
在使用el-table的时候，遇到对el-table-column显示与隐藏的控制时，使用v-show不生效，使用v-if样式不对。v-show起作用的本质是display:none，而因为td的display: table-cell；权限高于display:none，所以v-show失效；v-if切换标签显示隐藏时，多个相同的标签被渲染，需要使用key来区分，否则就会出现多个复用...
v-show失效&&element时间选择器弹框位置
littleOneYuan的博客
08-02 478
文章目录问题原因分析解决补充 问题 两个都用v-if控制显示隐藏，时间选择器弹框位置在左上角 用v-show控制，时间选择器弹框位置正确，但第二个v-show失效 原因分析 v-show不能对多个元素生效！？ 全部使用v-if，一开始第二个的dom没有渲染，所以选择器弹框找不到定位点，于是相对浏览器窗口定位 v-if：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 v-show：根据表达式之真假值，切换元素的 displ
v-show遇到的坑
weixin_43167662的博客
05-26 343
1.开发中要设置一个按钮是否展示 条件是当这行没有sku,并且活动类型是008和010的时候才展示该按钮 第一次我使用的是或|| <el-button v-show="!scope.row.sku && promotion.promotionType=='008'||promotion.promotionType=='010'" size="mini" @click="queryskuInfo(scope.row.spu)" type="primary">选择sku&lt.
Element的dialog使用的是v-show来控制显示与隐藏
我爱美女S的博客
12-29 2854
题外话：今天面试有被问到，我之前开发中使用dialog碰到过有缓存清不掉，百度看别人说使用v-if可以清除。后来用别的语句清除了。今天我直接答了v-if。 正文 我在安装的依赖包中查看了dialog源码，Element的dialog使用的是v-show来控制显示与隐藏。 body已经使用了v-if。所以再给什么body里的textarea添加v-if来清缓存，是没有用的。组件中的结构类名与控制台中的一一对应，如下图。 在网页中，打开控制台，可以看到是使用了display:none来控制dialog的显示与
elementui的table组件，大量使用v-if导致列表渲染错乱，有的列渲染的值不对，有的列渲染出来的空值解决办法
04-11 1841
先说一下，之所以是同事那边碰到的而我这边碰不到这个问题，是因为我这边做。，其实这个问题解决起来也超级简单，平铺出来的也加上。这是同事碰上的，感觉挺奇怪的就研究了研究。这是平铺出来的，从这里可以看到到处都是。遍历出来的，vue 开发的都知道，即可，可以自己排列，也可以直接。关键词就好啦，只需要给。方式，碰不到这种问题都…，他这里是平铺出来的。
v-if控制dz-table-column某一列的显示隐藏不生效
05-12
如果您使用 v-if 来控制 dz-table-column 某一列的显示隐藏不生效，您可以尝试以下方法： 1. 确认您使用的是 dz-table-column 而非 el-table-column。dz-table-column 是饿了么团队开发的针对 Vue.js 2.x 版本的表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值