el-tabs 切换时数据不更新的问题

最近业务需求,需要在页面中使用tabs,使用过程中出现tabs切换,数据不更新的问题,以下是思路和解决办法。

Vue 会追踪你在模板中绑定的数据,并在数据发生变化时重新渲染相应的部分。但在使用 el-tabs 时,有时切换 Tab 后,数据不会立即更新,原因是diff算法比对的过程红,会尽量复用dom节点,而vue的算法把切换前后的dom识别为同个dom,所以不更新。

为了确保 Tab 切换时能正确地触发重新渲染,我们要做的就是触发他的正确识别,然后正常渲染。

方法1:key 的使用

el-tabs 添加一个唯一的 key 属性。这样,当数据或组件改变时,Vue 将能够识别并重新渲染它。注意:key不要用index,最好是和业务相关的、动态生成的,防止前后key值一样达不到区分dom节点的目的。

html 复制代码
<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane :label="'Tab 1'" :key="tab1Key">
      <!-- Tab 1 内容 -->
      <div>{{ tab1Content }}</div>
    </el-tab-pane>
    <el-tab-pane :label="'Tab 2'" :key="tab2Key">
      <!-- Tab 2 内容 -->
      <div>{{ tab2Content }}</div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'Tab 1',
      tab1Key: 'tab1-' + Date.now(),
      tab2Key: 'tab2-' + Date.now(),
      tab1Content: null,  // 初始为null
      tab2Content: null,  // 初始为null
    };
  },
  methods: {
    
  },
  created() {
    
  },
};
</script>
方法2:强制更新

使用 Vue 的 $forceUpdate 方法来强制组件重新渲染。但这种方法并不推荐,因为它绕过了 Vue 的正常更新机制。

方法3:使用v-if进行显隐控制

v-if进行true-false的切换,会销毁该元素及其所有绑定的事件、数据、组件实例等,触发重新渲染。

缺点:如果频繁切换显隐,可能会带来性能开销。

html 复制代码
<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane :label="'Tab 1'" v-if="showTab1">
      <div>Tab 1 内容</div>
    </el-tab-pane>
    <el-tab-pane :label="'Tab 2'" v-if="showTab2">
      <div>Tab 2 内容</div>
    </el-tab-pane>
    <el-tab-pane :label="'Tab 3'" v-if="showTab3">
      <div>Tab 3 内容</div>
    </el-tab-pane>
  </el-tabs>

  <el-button @click="toggleTabs">切换Tab显示</el-button>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'Tab 1',
      showTab1: true,
      showTab2: false,
      showTab3: false
    };
  },
  methods: {
    toggleTabs() {
      // 控制 Tab 的显示与隐藏
      this.showTab1 = !this.showTab1;
      this.showTab2 = !this.showTab2;
      this.showTab3 = !this.showTab3;
    }
  }
};
</script>
相关推荐
袁煦丞24 分钟前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码32 分钟前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig3 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少3 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder3 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix3 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句3 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易3 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟3 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试