vue3常見問題及解決方案(四)父元件切換行,然後子元件切換tab,子元件內的資料不重新整理

馬洪彪 發表於 2022-05-26
Vue

問題描述

父元件切換行,然後子元件切換tab,子元件內的資料不重新整理。
例如父元件為訂單,子元件為訂單相關商品和相關客戶,商品和客戶使用tab選項卡組織。
當tab顯示商品頁時,切換訂單,商品頁內容跟著切換,然後切換到客戶,客戶頁顯示的卻不是當前訂單的子資訊。
vue3常見問題及解決方案(四)父元件切換行,然後子元件切換tab,子元件內的資料不重新整理

解決辦法

為子元件所在的tabPane新增forceRender屬性

新增該屬性後,即使這個tabPane沒有顯示,也會進行渲染。

  <a-tab-pane tab="訂單客戶" key="2" forceRender> 

響應tabs的tabchange事件

新增forceRender將增加服務壓力,例如使用者僅關注商品頁內容時,不斷切換訂單,查詢訂單客戶的資訊是沒有意義的。
響應tabchange事件,當tabchange時,查詢當前tabpanel下的記錄,這樣避免無意義的渲染。

進一步優化

在rowchange和tabchange事件中,如果行記錄切換,則標識子資訊需要重新整理(子資訊內容未渲染過),如果tab頁籤切換,則判斷(該頁籤)內容是否已渲染過,僅當需要渲染時進行渲染,並在渲染後標識為已渲染。
這樣當訂單停留在某一記錄上,反覆切換訂單商品和訂單客戶都僅一次重新整理資料。

  • 定義子記錄重新整理標記
let refreshLags = [true,true];
  • 行切換
function onRowChange(){
  refreshLags = [true,true];
  refreshData();
}
  • tab切換
function onTabChange(){
  refreshData();
}
  • 子記錄載入方法
function refreshData(){
  let curentPaneIndex = xxx;
  let currentRowId = yyy;
  switch(curentPaneIndex){
    case 0:
      if(refreshLags[0]){
        loadSubDataA(yyy);
        refreshLags[0]=false;
      }
      break;
    case 1:
      if(refreshLags[1]){
        loadSubDataB(yyy);
        refreshLags[1]=false;
      }
      break;
  }
}
  • 載入子記錄A
function loadSubDataA(rowId){
  refSubA.value.loadData(rowId);
}
  • 載入子記錄B
function loadSubDataB(rowId){
  refSubB.value.loadData(rowId);
}