vue elui 使用v-if 判断tab时样式错乱

最新推荐文章于 2023-07-31 09:28:08 发布
最新推荐文章于 2023-07-31 09:28:08 发布
阅读量1k 收藏 2
点赞数 3
分类专栏： vue 文章标签： el-ui 样式错乱
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38026437/article/details/103119413
版权

项目中用el ui 的tab显示数据

6个数组的数据不同 所以用了 v-if 来判断

但是同样的数据，显示出来的样式乱七八糟

查了半天才知道 是因为没有加上 key值，所以才会渲染错乱。具体原因也不知道。

只要在table 加上key 就可以了

<el-table v-if="personalType=='publicNumber'" :data="publicNumberArray" key="publicNumber" >

vue的循环也是，如果不加上 绝对不同的key 可能就会出 .length 错误或者 一些简单的数组错误 

还不放心，也可以给key加一个 随机数 就可以了

key="Math.random()"

 

百味苦
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
VUE中V-IF条件判断改变元素的样式操作
10-14
主要介绍了VUE中V-IF条件判断改变元素的样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随想过来看看吧
vue element table表格中使用v-if表格样式发生变化
凡尘
09-16 341
vue element table表格中使用v-if表格样式会乱
vue+elementui项目中使用el-table在el-table-column上使用v-if的时候乱序和样式错乱的问题
my466879168的博客
07-10 4828
样式错乱的问题 项目的需求是点击不同的按钮在一个表格上进行不同数据的展示，当使用v-if切换的时候，写在后面的列竟然跑到了前面显示 解决方法 在需要使用v-if渲染的el-table-column元素上加上一个不重复的key值即可解决问题 <el-table-column v-if="status ===3" :key="Math.random()">是否在线</el-table-column> <el-table-column v-if="type !=3" :key="Ma
ElementUI 表格 el-table，在大量使用 v-if 时列表渲染出现错乱，要么 A 列的数据显示在 B 列上，要么后端有数据的但是显示的为空
snowflakelm的博客
06-14 1739
值，我一般习惯使用字段名，也可以随机生成一个值，只要具有唯一性就可以。作为唯一标识，这样渲染的时候就不会因为复用原则导致列数据混乱了。来控制显示隐藏时，就会出现列数据错乱的情况。当 el-table 表格上的列。
vue中的tab切换（v-show,v-if）
fenghui187的博客
04-18 8478
今天在用vue写tab切换的时候遇到了一个小坑，就是：不同的选项对应的列表的渲染我用的是v-show进行判断，结果发现虽然选项见得列表切换成功了但是列表的渲染样式却出现了一场异常，
在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 中的条件渲染...
使用vue-router与v-if实现tab切换遇到的问题及解决方法
12-09
忽然碰到一个常见的问题，明明可以使用 v-if / v-show 可以的解决的问题，有没有必要是使用 vue-router来解决。 比如常见的 tab 切换。一时间，我有些犹豫了，有没有必要滥用 vue-router。那到底何时用才叫合理呢？ ...
vue.js使用v-if实现显示与隐藏功能示例
10-18
在实际开发中，还可以配合`v-else`和`v-else-if`来实现更复杂的逻辑判断，或者与`v-show`指令一起使用，`v-show`虽然也能实现类似的隐藏和显示功能，但它并不像`v-if`那样销毁和重建DOM元素，而是通过CSS的`display`...
vue 使用v-if v- else tab切换数据对应数据方法
m0_64531353的博客
02-28 373
//tab拦 <div class="nav1"> <span v-for="(item, index) in typeList" :key="index" @click="navClick(item.shortName)" :class="{actives:flag==item.shortName}"> {{item.name}} </span> </div> /...
Vue table显示v-if、v-else-if 多层判断写法
热门推荐
浮萍的博客
07-27 2万+
&lt;el-table-column prop="versionStatus" label="标准状态"&gt; &lt;template slot-scope="scope"&gt; &lt;p v-if="scope.row.versionStatus=='1'"&gt;
vue里的tab栏切换,配合指令v-for,v-if,v-bind使用
那一刻的博客
06-27 908
第一种 <template> <view v-for="(item,index) in list" :key="index"> <view @click=cur=index :class="{active: cur==index}">{{ item }}</view> </view> <view> <view v-for="(itm,index) in tabMain" :key="index" v
vue—el-table通过v-if渲染列表显隐，排列混乱处理
08-01 1021
el-table通过v-if渲染列表显隐，排列混乱处理
vue+vxe-table中的vxe-table-column配合v-if导致列样式与位置错乱
wwf1225的博客
01-10 1973
咨询工具咨询工具咨询工具
el-popover 样式不生效处理
最新发布
qq_41438838的博客
07-31 286
important;important;important;important;</style>
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象
奔跑吧代码
11-02 2107
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象
v-if和v-show的区别？使用场景？v-if状态改变调用钩子函数的示例
做笔记\记录遇到的程序bug
01-07 927
v-if和v-show的区别？使用场景？v-if状态改变调用钩子函数的示例
vue表格 el-table使用v-if隐藏显示列无效、不符合预期问题
SillyBoy的博客
02-08 2239
问题 vue el-table使用v-if动态隐藏显示无效、不符合预期，隐藏与显示跟设置的不符。 解决方法 给el-table增加key,每次增加隐藏列时修改key的值。 修改后: <template> <div> <!--数据改变时修改keyId --> <el-table :key="keyId" ref="filterTable" :data="tableData" > ...... </e
vue中的样式冲突
m0_61631823的博客
01-14 3756
1.样式冲突问题：默认情况下，写在vue组件中的样式会全局生效，因此很容易造成多个组件之间样式冲突问题 2.造成的原因： ①单页面应用程序中，所有组件的DOM结构都是基于唯一的index.html页面进行呈现的 ②每个组件中的样式都会影响整个index.html页面中的DOM元素 3.解决办法：在style标签中加上一个scoped属性，它可以自动给样式标签生成自定义属性 用法： <style lang="less" scoped></style> 4.deep属性：
el-table使用v-if显示错乱问题
hua_ban_yu的博客
03-25 5667
el-table使用v-if显示错乱问题
在vue3中使用v-if来判断渲染哪个表格应该怎么写
03-26
在 Vue3 中，使用 `v-if` 来判断渲染哪个表格的写法与 Vue2 相同。 示例代码如下： ```html <template> <div> <button @click="showTable1 = !showTable1">Toggle table 1</button> <button @click="showTable2 = !showTable2">Toggle table 2</button> <table v-if="showTable1"> <!-- table1 content here --> </table> <table v-else-if="showTable2"> <!-- table2 content here --> </table> <p v-else>No table to show</p> </div> </template> <script> export default { data() { return { showTable1: true, showTable2: false, }; }, }; </script> ``` 在上面的示例代码中，我们使用了 `v-if` 和 `v-else-if` 来判断当前要显示哪个表格，如果两者都不满足，则最后使用 `v-else` 显示 “No table to show” 的文本信息。 在 `data` 中声明了两个变量 `showTable1` 和 `showTable2` ，分别表示是否显示表格1和表格2。通过点击按钮，可以切换显示/隐藏相应的表格。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值