问题描述

父组件切换行,然后子组件切换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);
}
作者:|马洪彪|,原文链接: https://www.cnblogs.com/mahongbiao/p/16308759.html

文章推荐

SpringCloud 服务治理

TornadoFx实现侧边栏菜单效果

《回炉重造 Java 基础》——集合(容器)

单词搜索问题

Spring Boot整合Swagger报错:"this.condition" is null

Redis 中的原子操作(1)-Redis 中命令的原子性

Spring 中 @EnableXXX 注解的套路

一文看懂 ZooKeeper ,面试再也不用背八股(文末送PDF)

手写 Promise

hikari连接池mysql连接空闲超8小时后自动断开问题

Mysql中int与Java数据类型对应关系

java多线程相关