/*
* 构建数据列
* */
tableColumns = (currentData) => { let group = lodashGroupBy(currentData, 'level1');
console.log('group', group);
return [{
title: '统计事项一级目录',
dataIndex: 'level1',
width: '100px',
key: 'level1',
render: (value, row, index) => {
if (!currentData.length || !currentData){
return '';
}
if (index === 0){//处理第一行数据
const obj = {
children: value,
props: {},
};
obj.props.rowSpan = group[value].length;
return obj
}
if (index > 0 && currentData[index-1].level1 === value){ //判断当前的值和前面一个值是否相等,如果相等则设置obj.props.rowSpan = 0;
const obj = {
children: value,
props: {},
};
obj.props.rowSpan = 0;
return obj
}else {
const obj = {
children: value,
props: {},
};
obj.props.rowSpan = group[value].length;
return obj
}
},
}, {
title: '统计事项二级目录',
dataIndex: 'level2',
width: '100px',
key: 'level2'
}].concat(this.dynamicMonth(this.state.startMonth, this.state.endMonth));
};

react——Table组件的更多相关文章

  1. react——Table组件列中靠左 靠右对齐解决方案

    最近项目中遇到一个需求调整:table中的文字过长居左排列,数字居右排列 然后看了一下官方文档: 先上图展示一下 左边是需要的效果: className: 'column-left', { title ...

  2. React中使用Ant Table组件

    一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...

  3. 封装react antd的表格table组件

    封装组件是为了能在开发过程中高度复用功能和样式相似的组件,以便我们只关注于业务逻辑层的处理,提高开发效率,提高逼格,降低代码重复率,降低劳动时间,减少加班的可能. 本次组件的封装采用了函数式组件即无状 ...

  4. react ,ant Design UI中table组件合并单元格并展开详情的问题

    需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢?  单元格合并?  还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...

  5. 解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

  6. 使用 antd Table组件, 异步获取数据

    使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...

  7. Ant Table组件

    http://www.cnblogs.com/hujunzheng/p/5689650.html React中使用Ant Table组件   v一.Ant Design of React http:/ ...

  8. 小而美的 React Form 组件

    背景 之间在一篇介绍过 Table 组件< React 实现一个漂亮的 Table > 的文章中讲到过,在企业级后台产品中,用的最多且复杂的组件主要包括 Table.Form.Chart, ...

  9. 微信小程序简易table组件实现

    前提:微信小程序自1.6.3基础库版本库开始支持简洁组件,之前的版本因不支持,故在引用组件处默认为空节点.关于微信小程序已有模板为何还需构建组件?一是因为组件可以更方便的自定义并绑定行为,二是在其他页 ...

随机推荐

  1. ML,DL核心数学及算法知识点总结

    ML,DL核心数学及算法知识点总结:https://mp.weixin.qq.com/s/bskyMQ2i1VMNiYKIvw_d7g

  2. Cogs 876. 游戏(DP)

    游戏 ★ 输入文件:game1.in 输出文件:game1.out 简单对比 时间限制:1 s 内存限制:128 MB USACO/game1 A Game游戏 译 by 肖遥 描述 有如下一个双人游 ...

  3. OpenStack Restful API框架介绍

    1  pecan框架介绍 1.1  什么是pecan pecan是一个轻量级的python web框架,最主要的特点是提供了简单的配置即可创建一个wsgi对象并提供了基于对象的路由方式. 主要提供的功 ...

  4. 【golang】使用rpcx不指定tags报错 undefined: serverplugin.ConsulRegisterPlugin

    为了避免引入不必要的库, rpcx采用了 Go 条件编译 的特性, 你可以只引入必要的特性. 比如你只使用 etcd 作为注册中心的时候, 你不希望引入 consul.zookeeper相关的库,你需 ...

  5. 【CSP模拟赛】避难向导(倍增lca&树的直径)

    耐力OIer,一天7篇博客 题目描述 “特大新闻,特大新闻!全国爆发了一种极其可怕的病毒,已经开始在各个城市 中传播开来!全国陷入了巨大的危机!大量居民陷入恐慌,想要逃到其它城市以 避难!经调查显示, ...

  6. 读取本地word 浏览器下载(设置编码格式)

    String filePath = "C:\\word\\报告.doc"; BufferedWriter bos = null; BufferedReader bis = null ...

  7. 安装adbyby

    搞得那么麻烦干什么,助人就要直接点嘛请用 Xshell 连接你的路由 1.安装curlopkg update && opkg install curl 2.创建相关文件夹(如已经安装a ...

  8. 狼人杀面杀APP(FGUI教程)

    本教程为FairyGUI进阶教程,这是一套完整的面杀桌游APP.游戏不仅有发放随机身份的功能,还涉及10个页面的切换与各页面不同状态(最多达9种状态)的切换,众多复杂UI的交互,多语言切换,3D粒子在 ...

  9. 第2课第1节_Java面向对象编程_类的引入_P【学习笔记】

    摘要:韦东山android视频学习笔记 1. 面向对象编程的引入,我们先写一个简单的程序输出张三,李四的名字.代码如下,假如,现在我们要在名字前面添加籍贯广东,那样岂不是每个printf语句都得修改添 ...

  10. css3画半圆的两种方法

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...