同一个页面同一区域两个el-table在v-if下样式重叠问题

最新推荐文章于 2024-06-24 18:07:10 发布
最新推荐文章于 2024-06-24 18:07:10 发布
阅读量464 收藏 1
点赞数 1
文章标签： elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44020255/article/details/134027579
版权

🍉正常情况下在radio切换时两个表格的样式应如下
在这里插入图片描述
在这里插入图片描述
🍉实际上用v-if显示时会出现以下问题（本该属于时间段相同模块的表格却出现在时间段自定义的表格中）
在这里插入图片描述
🍉解决方案：
🍃一、将v-if替换成v-show(我用这个可以，然后看到别人可能用这个还是不太行，那可以试试第二种)
🍃二、将v-if替换成<el-table :style="{'display':boolen ? 'block' : 'none'}"即可解决

香菜大魔王(✪ω✪)
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element 一个页面两个table显隐相互影响
初来乍到IT狗的博客
07-29 3783
  在用element UI 做项目时，发现如果一个页面有两个table时，并且这两个table会有一个显示一个隐藏的功能（v-if，v-else）时，会出现表格错落的情况，两个table会相互影响。经过查询VUE官网发现：   Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换： <template v-if="loginType === 'username'"> &l
element中同一个一面使用两个table,使用v-if判断显示，数据混乱
qq_35500778的博客
04-28 998
错误： 在一个页面中使用两个table,绑定不同的数据，并且在table中row中使用<tempale></template>,后两个table表的数据混乱使用； 解决方法： 在table上添加key属性值，两个table的key值不同即可 ...
vue将两个el-table上下拼接合成一个展示且横向滚动条联动
最新发布
zjx147的博客
06-24 132
将两个字段一样的el-table并列放在一起，下面的table隐藏表头。//给两个table 绑定ref属性。//然后隐藏上面子表格的滚动条。
ElementUI 表格 el-table，在大量使用 v-if 时列表渲染出现错乱，要么 A 列的数据显示在 B 列上，要么后端有数据的但是显示的为空
snowflakelm的博客
06-14 1760
值，我一般习惯使用字段名，也可以随机生成一个值，只要具有唯一性就可以。作为唯一标识，这样渲染的时候就不会因为复用原则导致列数据混乱了。来控制显示隐藏时，就会出现列数据错乱的情况。当 el-table 表格上的列。
el-table配合v-if导致数据错乱
简单随风的博客
01-20 1605
今天在使用vue + elementUI的el-table时，碰到一个很奇怪的bug：打印数据源正常，但是数据显示错误，一列不显示，一列显示重复 后面查了很多资料才知道el-table做了优化，可以复用列。解决方案是给table加上一个key标签，如下所示： <el-table :data="tableData" v-if="trackType === 1" key="0"> <el-table-column/> </el-table> <el-ta
ElementUI的表单效验问题 （一个页面两个form（数据相似））
CHunter1024的博客
08-28 1121
ElementUI的表单效验问题 （一个页面两个form（数据相似））
el-table加上v-if顺序混乱问题解决
junhian的博客
08-05 2261
el-table加上v-if数据错乱解决思路
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是因为 `el-tab-pane` 的渲染机制导致的。 `v-show` 和 `v-if` 都是 Vue 中的条件渲染...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
vue修改Element的el-table样式的4种方法
10-14
在示例中，`:header-cell-style="tableHeaderColor"`定义了一个名为`tableHeaderColor`的方法，用于改变表头行的样式。 4. **header-cell-style** 与header-row-style类似，header-cell-style专门用于表头单元格...
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
同时，确保在`el-table`中使用`v-if`指令来决定列是否渲染。 至于**列排序**，在`el-table`中，可以使用`sortable`属性来指定列是否可排序，而`sort-method`则用于自定义排序逻辑。默认情况下，`el-table`支持对...
element ui 中el-table中使用v-if造成组件复用问题---之---el-table 中使用el-popover 无法弹出问题
MISS_zhang_0110的博客
06-06 1589
表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，所以，通过column-key去标识一下当前行是唯一的，不许复用就行了。本人猜测是：v-if会导致updated生命周期执行，会覆盖上面的v-if的生命周期，导致上次的生命周期后的逻辑触发不了但是是错误的，不管是v-if还是v-show生命周期是一样的。在v-for或者v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况。
element表格之表头代码改进
S2763427717的博客
08-31 217
element表头代码改进
PC端浏览器，页面用Element UI table组件分左右两张表格，怎么实现单一表格滚动时，另一个表格也同步滚动
qq_36453396的博客
04-28 2369
PC端浏览器，页面用Element UI table组件分左右两张表格，怎么实现单一表格滚动时，另一个表格也同步滚动
vue怎么在一个页面里写两个表格_vue项目中将element-ui table表格写成组件
weixin_40005454的博客
12-22 4650
表格中我们经常需要动态加载数据， 如果有多个页面都需要用到表格， 那我希望可以有个组件， 只传数据过去显示， 不用每个页面都去写这么一段内容：1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 查看16 编辑17 1...
Vue Element UI el-table 显示样式重叠 (问题解决)
Bnana博客
04-09 5706
Vue Element UI el-table 显示样式重叠(问题解决) element ui 问题解决 element ui el-table 样式显示问题 element ui el-table 样式覆盖问题 element ui el-table 样式问题 element ui el-table 表格显示问题 element ui el-table 表格样式重叠 叠加 问题 element ui el-table 样式叠加显示问题 解决 Vue Element UI 问题 解决
element-ui el-table 展示多列重复数据
qq_20494353的博客
03-03 3239
项目中显示表格，内容只有两列数据，所以当数据很多的时候，可以重复3遍这两列数据，显示在页面上。如下图所示： 姓名 成绩 姓名 成绩 姓名 成绩 张三 60 李四 70 王五 80 小明 66 小红 67 小美 90 小王 88 使用vue + element UI js代码 export default { data() { return { tableData:[ {name:'张三',poi
Vue2+ElementUI学习笔记——v-if
Ultra_SevenX的博客
04-13 739
Vue2+ElementUI学习笔记——v-if
el-table-column v-if闪屏
04-11
el-table-column的v-if闪屏问题是指在使用v-if条件渲染el-table-column时，会出现一瞬间的闪屏现象。这是因为在条件判断为true之前，el-table-column会被渲染出来，然后再根据条件进行显示或隐藏。 为了解决这个问题，可以使用v-show指令代替v-if指令。v-show指令会通过CSS的display属性来控制元素的显示与隐藏，而不会在DOM中添加或移除元素，从而避免了闪屏现象。 下面是一个示例代码： ```html <el-table> <el-table-column v-show="showColumn">...</el-table-column> </el-table> ``` 在上面的代码中，通过v-show指令将el-table-column的显示与隐藏与showColumn变量进行绑定。当showColumn为true时，el-table-column会显示；当showColumn为false时，el-table-column会隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值