一进入tabs标签页默认就将所有标签页的数据请求到,并渲染到页面上,

这样如果数据量太大的话会渲染很久,

我的需求就是点击不同的标签时再请求数据,同时对点击过的标签页数据进行缓存,下次点击时不再重新请求、渲染数据。

1. 分别请求数据的话,可以用tabs标签的onchange属性,根据参数index的不同来请求不同的数据。

2. 数据缓存的话,可以在首次传参时定义一个变量接收参数值,如果后面传入的参数值等于这个变量值的话就不再向后台请求,直接return;不等的话就再请求。

//对页面进行缓存,避免重复请求
if (this.state.flag == rowData) {
     return
}else{
    this.state.flag = rowData
    // 请求数据的函数
    RegistrationCardModel.getOrdinaryData(rowData)
}

tabs标签页的数据缓存的更多相关文章

  1. Android之ActionBar、Tabs、Fragment、ViewPager实现标签页切换并缓存页面

    感觉 Android 到处都是坑,每个地方都要把人折腾半天. 今天来简单说说 Android之ActionBar.Tabs.Fragment.ViewPager 实现标签页切换并缓存页面 关于他们的介 ...

  2. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  3. 踩iviewui中Tabs 标签页数据绑定坑

    今天小颖要实现点击Tabs 标签页中每个标签,并动态获取当前点击的标签值. 一句话说不清楚,那就看动态图吧 小颖一开始看官网写的代码是: <template> <Tabs :valu ...

  4. easyui,获取tabs标签页内容,以及刷新datagrid

    因为先点开tab页xxx查看表格,再点另一个tab页xxxx修改部分信息,再切换到tab页xxx,tab页xxx里的datagrid表格不会刷新,显示不了修改的信息(在此tab页按F5刷新可以解决,但 ...

  5. Tabs - 标签页

    <div class="J_TWidget tab" data-widget-type="Tabs"style="width:宽度px; hei ...

  6. Jquery实现的Tabs标签页

    效果图: HTML: <div class="tabs"> <ul id="tabs"> <li class="tab- ...

  7. vue element-ui Tabs 标签页实现【更多】功能

    element-ui Tabs本身是没有更多功能的,如果在外边添加一个更多按钮,又非常不好看, 而利用API中Tabs Attributes的before-leave勾子方法可以实现这个功能, 简单P ...

  8. tabs(标签页的现成页面)原生js写法

    直接上代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  9. js中Tabs插件打开的标签页过多自动关闭

    js方法 function addTab(ResourceID, ResourceName, Url) { if (Url != "" && Url != null ...

随机推荐

  1. (水题)洛谷 - P1996 - 约瑟夫问题 - 链表

    https://www.luogu.org/problemnew/show/P1996 试了一下数组实现的双向链表,是挺难用的,估计是应该写个get_next()函数比直接用next数组好. #inc ...

  2. loj#2542. 「PKUWC2018」随机游走(树形dp+Min-Max容斥)

    传送门 首先,关于\(Min-Max\)容斥 设\(S\)为一个点的集合,每个点的权值为走到这个点的期望时间,则\(Max(S)\)即为走遍这个集合所有点的期望时间,\(Min(S)\)即为第一次走到 ...

  3. redis 发布订阅实现异步实时发短信

    redis 中发布和订阅可以实现消息的实时传输,这里我只是用它的事件驱动,当客户端发送了消息,服务器端立马可以接收指令处理相应的业务逻辑. 客户端 client.php <?php //发布 $ ...

  4. (十)SpringBoot的文件上传

    一:添加commons-fileupload依赖 打开pom文件添加 <dependency> <groupId>commons-fileupload</groupId& ...

  5. Swoole和Workerman到底选谁?

    Swoole:面向生产环境的 PHP 异步网络通信引擎 使 PHP 开发人员可以编写高性能的异步并发 TCP.UDP.Unix Socket.HTTP,WebSocket 服务.Swoole 可以广泛 ...

  6. Java图解

    java虚拟机 JVM运行过程: java开发工具包 java入门图解1 java入门图解2 java入门图解3 java入门图解4

  7. Win7下单机版的伪分布式solrCloud环境搭建Tomcat+solr+zookeeper【转】

    Win7下单机版的伪分布式solrCloud环境搭建Tomcat+solr+zookeeper 1.软件工具箱 在本文的实践中,需要用到以下的软件: Tomcat-7.0.62+solr-5.0.0+ ...

  8. Spring------自动化装配Bean(二)

    上一篇是基于 @ComponentScan自动装配Bean的实现,这一篇将通过java手动装配bean来实现. 手动装配相对于自动装配的优点: 可以自行定义Bean的各个属性. 添加额外的方法调度. ...

  9. 关于发布WP 8.1应用信息不匹配问题的解决办法

    错误提示:   与此更新关联的程序包标识符与已上传程序包中的标识符不匹配: The package identity associated with this update doesn't match ...

  10. AJPFX总结内部类

    内部类:内部类的访问规则:1. 内部类可以直接访问外部类中的成员,包括私有   原因是内部类中持有了一个外部类的引用,格式:外部类.this2. 外部类要访问内部类,必须建立内部类对象访问格式:1.  ...