Ver código fonte

fix(views): 修复设备分组和能耗分析页面的 Tab 组件内容反复渲染的问题

wangcong 1 mês atrás
pai
commit
ab4b9f87dd

+ 5 - 1
src/views/device-group/DeviceGroup.vue

@@ -59,7 +59,11 @@ const handleTabClick = (activeKey: string | number) => {
   <div class="device-group-container">
     <ATabs class="device-group-tab" v-model:active-key="activeKey" @tab-click="handleTabClick">
       <ATabPane v-for="item in aiSmartCtrlTabs" :key="item.key" :tab="item.name">
-        <component v-if="renderView" :is="item.component" :device-group-id="Number(deviceGroupId)" />
+        <component
+          v-if="activeKey === item.key && renderView"
+          :is="item.component"
+          :device-group-id="Number(deviceGroupId)"
+        />
       </ATabPane>
     </ATabs>
   </div>

+ 1 - 1
src/views/energy-analysis/EnergyAnalysis.vue

@@ -44,7 +44,7 @@ const handleDevGroupChange = (id: number) => {
   <ATabs class="button-tabs-compact" v-model:active-key="activeKey" type="card" @tab-click="refreshView">
     <ATabPane v-for="item in energyTabs" :key="item.key" :tab="item.name">
       <component
-        v-if="deviceGroupId !== undefined && renderView"
+        v-if="deviceGroupId !== undefined && activeKey === item.key && renderView"
         :is="item.component"
         :device-group-id="deviceGroupId"
       />