一进入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. BFS+PRIM

    转载请注明出处:優YoU http://user.qzone.qq.com/289065406/blog/1299324104 在一个y行 x列的迷宫中,有可行走的通路空格' ',不可行走的墙'#', ...

  2. bzoj 1207: [HNOI2004]打鼹鼠【dp】

    跟简单的dp,设f[i]表示前i只最多打几只,因为起点不确定,所以f[i]可以从任意abs(x[i]-x[j])+abs(y[i]-y[j])<=abs(time[i]-time[j])的j&l ...

  3. android内存溢出 java.lang.OutOfMemoryError

    今天在做ListView 的时候.想做一个音乐列表模块,前面是图片,后面是分类名称,如下图: 结果运行时候,LogCat是总是报 java.lang.OutOfMemoryError的错误,顾名思义, ...

  4. python 处理时间和日期

    转自: https://www.cnblogs.com/65702708/archive/2011/04/17/2018936.html Python格式化日期时间的函数为datetime.datet ...

  5. 题解报告:NYOJ #737 石子合并(一)(区间dp)

    描述 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程只能每次将相邻的两堆石子堆成一堆,每次合并花费的代价为这两堆石子的和,经过N-1次合并后成为一堆.求出总的代价最小值 ...

  6. 122 Best Time to Buy and Sell Stock II 买卖股票的最佳时机 II

    假设有一个数组,它的第 i 个元素是一个给定的股票在第 i 天的价格.设计一个算法来找到最大的利润.你可以完成尽可能多的交易(多次买卖股票).然而,你不能同时参与多个交易(你必须在再次购买前出售股票) ...

  7. Vue checkbox默认值改变

    <label><input  v-bind:true-value="1" v-bind:false-value="0" type=" ...

  8. .net服务端生成二维码

    mvc4   net4.0 1.引用附件的DLL文件 2.两个函数即可 #region 生成二维码 public ActionResult getQrCode() { using (var ms = ...

  9. 构建微服务开发环境6————利用npm安装前端框架

    [内容指引] 安装JQuery组件: 安装BootStrap前端框架; 安装AngularJs前端框架: 安装angular动画模块: 安装angular的ui-router模块. 一.进入下载的目标 ...

  10. PHP设计模式 原型模式(Prototype)

    定义 和工厂模式类似,用来创建对象.但实现机制不同,原型模式是先创建一个对象,采用clone的方式进行新对象的创建. 场景 大对象的创建. 优点 1.可以在运行时刻增加和删除产品 2.可以改变值或结构 ...