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

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

問題描述

父元件切換行，然後子元件切換tab，子元件內的資料不重新整理。
例如父元件為訂單，子元件為訂單相關商品和相關客戶，商品和客戶使用tab選項卡組織。
當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);
}

相關文章