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>
相关推荐
天生我材必有用_吴用6 分钟前
vue3实战九、vue3+vue-cropper实现头像修改
前端
Sobeit15 分钟前
ES2025 颠覆性 JS 黑科技新特性详解
前端
new_abc21 分钟前
net-snmp添加自定义mib树
服务器·前端·javascript
前端梭哈攻城狮28 分钟前
dify二开示例
前端·后端·python
该用户已不存在30 分钟前
Node.js 真的取代了PHP吗?
前端·后端·node.js
ze_juejin39 分钟前
JavaScript 的事件循环(Event Loop)机制
前端
前端缘梦43 分钟前
从源码到dist:拆解Webpack如何完成前端工程的"基因编译"
前端·webpack
热爱运维的小七1 小时前
中型企业如何用 RUM 技术破解地理分布式用户体验难题?从指标监测到优化实操
前端·网站响应速度·地域访问
程序猿阿伟1 小时前
《从点击到共鸣:论坛前端如何用交互细节编织用户体验》
前端·ux
樱花开了几轉1 小时前
React中的合成事件解释和理解
前端·javascript·react.js