Vue：使用v-if v-else加载两个el-table 在切换时，会出现数据在家混乱 数据加载不全的情况

目录

• [一、 出现场景](#一、 出现场景)
• [二、 出现原因](#二、 出现原因)
• 三、解决方案

---

一、 出现场景

使用v-if v-else加载两个el-table 在切换时，会出现数据在家混乱 数据加载不全的情况

二、 出现原因

• Vue的虚拟DOM复用机制：v-if/v-else 切换时，Vue 会尝试复用相同标签的 DOM 元素来提升性能，导致 el-table 的实例没有被完全重新初始化。
• el-table 内部的数据渲染异步性：表格的列、数据渲染是异步的，复用 DOM 后表格的状态没有被重置，从而出现数据混乱。

三、解决方案

给两个表格添加唯一的 key 属性：通过给每个 el-table 设置唯一的 key，告诉 Vue 这是两个不同的元素，不要复用它们的 DOM，从而让表格每次切换时都重新渲染，避免数据混乱。

<template>
  <div>
    <!-- 切换按钮 -->
    <el-button @click="toggleTable">切换表格</el-button>

    <!-- 表格1：添加唯一key -->
    <el-table
      v-if="showTable1"
      :key="'table1'"  <!-- 唯一key -->
      :data="tableData1"
      border
      style="width: 100%; margin-bottom: 20px;"
    >
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" />
    </el-table>

    <!-- 表格2：添加唯一key -->
    <el-table
      v-else
      :key="'table2'"  <!-- 唯一key -->
      :data="tableData2"
      border
      style="width: 100%;"
    >
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="product" label="产品名称" />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTable1: true, // 表格切换标识
      // 表格1数据
      tableData1: [
        { name: '张三', age: 20 },
        { name: '李四', age: 22 },
        { name: '王五', age: 25 }
      ],
      // 表格2数据
      tableData2: [
        { id: 1, product: '手机' },
        { id: 2, product: '电脑' },
        { id: 3, product: '平板' }
      ]
    };
  },
  methods: {
    toggleTable() {
      this.showTable1 = !this.showTable1;
    }
  }
};
</script>