Element-UI Tabs 标签页更新DOM错乱问题

如果是固定el-tab-pane数量不会出现这个问题,但是动态加载得话偶尔会出现:

“ Duplicate keys detected: 'tab-xx', This may cause an update error ” 的错误,

说明没有设置key的组件会导致DOM重复渲染,也会导致vue索引DOM组件出现问题。

解决办法是在el-tab-pane新增key属性并且保证唯一

element文档中并没有这个属性,但还是要增加这个key属性。

<el-tabs>
  <el-tab-pane v-for="item in items" :key="item.id" :label="item.label">
    {{ item.content }}
  </el-tab-pane>
</el-tabs>

评论

  1. 2 年前
    2024-9-03 14:43:27

    Your blog is a true gem in the world of online content. I’m continually impressed by the depth of your research and the clarity of your writing. Thank you for sharing your wisdom with us.

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇