企业官网建设流程全解析

学校网站首页代码html,动漫制作就业方向,阿里云使用wordpress-move,企业网站设计图片目录一、 出现场景二、 出现原因三、解决方案一、 出现场景 使用v-if v-else加载两个el-table 在切换时#xff0c;会出现数据在家混乱 数据加载不全的情况 二、 出现原因 Vue的虚拟DOM复用机制#xff1a;v-if/v-else 切换时#xff0c;Vue 会尝试复用相同标签的 DOM 元…目录一、 出现场景二、 出现原因三、解决方案一、 出现场景使用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从而让表格每次切换时都重新渲染避免数据混乱。templatediv!-- 切换按钮 --el-buttonclicktoggleTable切换表格/el-button!-- 表格1添加唯一key --el-tablev-ifshowTable1:keytable1!--唯一key--:datatableData1 border stylewidth: 100%; margin-bottom: 20px; el-table-columnpropnamelabel姓名/el-table-columnpropagelabel年龄//el-table!-- 表格2添加唯一key --el-tablev-else:keytable2!--唯一key--:datatableData2 border stylewidth: 100%; el-table-columnpropidlabel编号/el-table-columnpropproductlabel产品名称//el-table/div/templatescriptexportdefault{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