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-tablev-if="showTable1":key="'table1'"<!--唯一key-->:data="tableData1" border style="width: 100%; margin-bottom: 20px;" ><el-table-columnprop="name"label="姓名"/><el-table-columnprop="age"label="年龄"/></el-table><!-- 表格2：添加唯一key --><el-tablev-else:key="'table2'"<!--唯一key-->:data="tableData2" border style="width: 100%;" ><el-table-columnprop="id"label="编号"/><el-table-columnprop="product"label="产品名称"/></el-table></div></template><script>exportdefault{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>