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>
相关推荐
wycode5 分钟前
Promise(一)极简版demo
前端·javascript
浮幻云月6 分钟前
一个自开自用的Ai提效VsCode插件
前端·javascript
DevSecOps选型指南8 分钟前
SBOM风险预警 | NPM前端框架 javaxscript 遭受投毒窃取浏览器cookie
前端·人工智能·前端框架·npm·软件供应链安全厂商·软件供应链安全工具
__lll_16 分钟前
Docker 从入门到实战:容器、镜像与 Compose 全攻略
前端·docker
木春29 分钟前
react组件化思维:高复用性 UI 设计之道
前端·react.js
切克呦38 分钟前
通过 Cursor CLI 使用 GPT-5 的教程
前端·后端·程序员
gitboyzcf39 分钟前
Git 常用命令
前端·git·后端
Juchecar39 分钟前
Vue3 多个router-view命名视图示例(注意components复数)
前端
代码改变世界1008639 分钟前
像素风球球大作战 HTML 游戏
前端·游戏·html