前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue3常见问题及解决方案(四)父组件切换行,然后子组件切换tab,子组件内的数据不刷新

vue3常见问题及解决方案(四)父组件切换行,然后子组件切换tab,子组件内的数据不刷新

作者头像
用户1637609
发布2022-05-27 08:23:43
2.2K0
发布2022-05-27 08:23:43
举报
文章被收录于专栏:马洪彪马洪彪

问题描述

父组件切换行,然后子组件切换tab,子组件内的数据不刷新。 例如父组件为订单,子组件为订单相关商品和相关客户,商品和客户使用tab选项卡组织。 当tab显示商品页时,切换订单,商品页内容跟着切换,然后切换到客户,客户页显示的却不是当前订单的子信息。

解决办法

为子组件所在的tabPane添加forceRender属性

添加该属性后,即使这个tabPane没有显示,也会进行渲染。

代码语言:javascript
复制
  <a-tab-pane tab="订单客户" key="2" forceRender> 

响应tabs的tabchange事件

添加forceRender将增加服务压力,例如用户仅关注商品页内容时,不断切换订单,查询订单客户的信息是没有意义的。 响应tabchange事件,当tabchange时,查询当前tabpanel下的记录,这样避免无意义的渲染。

进一步优化

在rowchange和tabchange事件中,如果行记录切换,则标识子信息需要刷新(子信息内容未渲染过),如果tab页签切换,则判断(该页签)内容是否已渲染过,仅当需要渲染时进行渲染,并在渲染后标识为已渲染。 这样当订单停留在某一记录上,反复切换订单商品和订单客户都仅一次刷新数据。

  • 定义子记录刷新标记
代码语言:javascript
复制
let refreshLags = [true,true];
  • 行切换
代码语言:javascript
复制
function onRowChange(){
  refreshLags = [true,true];
  refreshData();
}
  • tab切换
代码语言:javascript
复制
function onTabChange(){
  refreshData();
}
  • 子记录加载方法
代码语言:javascript
复制
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
代码语言:javascript
复制
function loadSubDataA(rowId){
  refSubA.value.loadData(rowId);
}
  • 加载子记录B
代码语言:javascript
复制
function loadSubDataB(rowId){
  refSubB.value.loadData(rowId);
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题描述
  • 解决办法
    • 为子组件所在的tabPane添加forceRender属性
      • 响应tabs的tabchange事件
        • 进一步优化
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档