首页 > 其他分享 >antd-tabs切换数据重复渲染

antd-tabs切换数据重复渲染

时间:2024-08-09 17:55:13浏览次数:7  
标签:渲染 tabs tab2 tab1 flag 等于 antd

两个tabs来回切换的时候,发现一直重复渲染数据,

在两个tabs的展示上加一个flag标识,然后用v-if,判断,点击到tab1的时候,flag等于tab1,然后渲染tab1,

点击到tab2的时候,flag等于tab2,然后渲染tab2,这样可以避免重复渲染

 

如下:

在handleChangeActivekey方法里设置,点击tab1的时候,让tab1等于true,tab2等于false;点击tab2的时候,让tab2等于true,tab1等于false。

 

<a-tabs :default-active-key="selectedActiveKey" @change="handleChangeActivekey">
        <a-tab-pane key="1" tab="tab1">
          <report-content v-if="tab1" >
          </report-content>
        </a-tab-pane>
        <a-tab-pane key="2" tab="tab2">
          <report-content v-if="tab2">
          </report-content>
        </a-tab-pane>
      </a-tabs>

 

标签:渲染,tabs,tab2,tab1,flag,等于,antd
From: https://www.cnblogs.com/comeoncode/p/18351136

相关文章

  • React原理之React整体渲染流程
    前置知识:深度优先搜索(DFS)、Fiber节点在上一篇React原理篇之React整体架构解读中,提到了Fiber架构中的几个核心概念:Scheduler(调度器):根据任务的优先级安排任务执行顺序。Reconciler(协调器):根据新旧虚拟DOM树的差异确定需要更新的部分。Renderer(渲染器):将更新的虚拟......
  • 【面试高频,必知必会】OpenGL渲染流程
    ......
  • (算法)图像渲染————<递归>
    1.题⽬链接:733.图像渲染2.题⽬描述:3.算法思路:可以利⽤「深搜」或者「宽搜」,遍历到与该点相连的所有「像素相同的点」,然后将其修改成指定的像素即可。递归函数设计:•参数:a.原始矩阵;b.当前所在的位置;c.需要修改成的颜⾊。•函数体:a.先将该位置的颜⾊......
  • 深中通道元宇宙启航!3DCAT实时云渲染助力沉浸式体验深中通道
    2024年6月30日上午,深圳至中山跨江通道(以下简称“深中通道”)开通活动在深中通道西人工岛举行。10时50分许,深中通道正式开通。下午3时已通车试运营。粤港澳大湾区超级工程深中通道(图源新华网)01 幻海云桥:沉浸式体验的新纪元就在开通的同一天,中山日报社与3DCAT、广东涌态信息等......
  • react渲染列表中的key的作用
    这个key首先是只在渲染数组列表的时候会用到。比如经常遇到的 如上没有key的话,会报一个错,那么,我们可不可以使用数组的index作为下标呢?答案是不推荐。因为在数组项的顺序在插入、删除或者重新排序等操作中会发生改变,此时把索引作为key可能会产生一些微妙的bug。像下面这种......
  • 轮换挑选图片,补充 es6的对象写法,uniapp使用,class和style,条件渲染,列表渲染,input
    Ⅰ轮换挑选图片【一】方式一<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js2/vue.js"></script></head><body>......
  • 重塑购车体验,实时云渲染赋能东风日产探路云看车新体验
    在科技日新月异的今天,汽车行业正经历着前所未有的深刻变革。随着互联网+、大数据、人工智能等新兴技术的深度融合,汽车营销策略也迎来了从传统展示到数字化体验的跨越。消费者的购车习惯逐渐倾向于线上互动与深度体验,希望在线上获得线下同等的体验,迫使汽车制造商及经销商重新审......
  • styled-components 怎么定制 antd 组件的样式
    以Card组件为例说明,要使用styled-components定制AntDesign的Card组件样式,可以按照以下步骤进行:1.安装styled-components首先,确保你已经安装了styled-components和babel-plugin-styled-components(如果需要):npminstallstyled-componentsnpminstall--save......
  • 瑞云渲染动画:首充1元,立得100元渲染劵!
    瑞云渲染影视动画业务上线震撼首充福利!仅需1元,您将立即获得10元的无门槛渲染券,用户只要是第一次充值,即可享受到丰厚的渲染劵,助你动画项目加速起飞。别犹豫,立即加入,开启您的创意之旅。活动时间:长期有效面向人群:瑞云渲染动画用户新用户:注册瑞云动画填【GSZI】再领10元渲染劵!活......
  • 使用令牌的 Paytabs 定期付款请求给出 [422 - 无法处理您的请求] 错误
    我通过PaytabsTokenization方法创建了一个令牌,然后使用生成的令牌再次请求tran_class:recurring但我得到{'code':422,'message':'Unabletoprocessyourrequest','trace':'PMNT0102.65DCFAF6.0002C7A0'}作为响应第一次付款......