react——Table组件

/*
* 构建数据列
* */
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组件的更多相关文章
- react——Table组件列中靠左 靠右对齐解决方案
最近项目中遇到一个需求调整:table中的文字过长居左排列,数字居右排列 然后看了一下官方文档: 先上图展示一下 左边是需要的效果: className: 'column-left', { title ...
- React中使用Ant Table组件
一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...
- 封装react antd的表格table组件
封装组件是为了能在开发过程中高度复用功能和样式相似的组件,以便我们只关注于业务逻辑层的处理,提高开发效率,提高逼格,降低代码重复率,降低劳动时间,减少加班的可能. 本次组件的封装采用了函数式组件即无状 ...
- react ,ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- 解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐
一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...
- 使用 antd Table组件, 异步获取数据
使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...
- Ant Table组件
http://www.cnblogs.com/hujunzheng/p/5689650.html React中使用Ant Table组件 v一.Ant Design of React http:/ ...
- 小而美的 React Form 组件
背景 之间在一篇介绍过 Table 组件< React 实现一个漂亮的 Table > 的文章中讲到过,在企业级后台产品中,用的最多且复杂的组件主要包括 Table.Form.Chart, ...
- 微信小程序简易table组件实现
前提:微信小程序自1.6.3基础库版本库开始支持简洁组件,之前的版本因不支持,故在引用组件处默认为空节点.关于微信小程序已有模板为何还需构建组件?一是因为组件可以更方便的自定义并绑定行为,二是在其他页 ...
随机推荐
- SPA项目开发动态树、数据表格、分页功能
SPA项目开发 1.修改左侧动态树 LeftNav.vue <template> <el-menu router :" class="el-menu-vertic ...
- 洛谷 P2827 蚯蚓 题解
每日一题 day32 打卡 Analysis 我们可以想一下,对于每一秒除了被切的哪一个所有的蚯蚓都增长Q米,我们来维护3个队列,队列1表示最开始的蚯蚓,队列2表示每一次被切的蚯蚓被分开的较长的那一部 ...
- Linux LVM--三种Logic Volume
本文链接:https://blog.csdn.net/u012299594/article/details/84551722 概述 为了满足在性能和冗余等方面的需求,LVM支持了下面三种Logic V ...
- bzoj 5408: string 后缀自动机 + LCT
联赛前练练码力. code: #include <vector> #include <cstdio> #include <cstring> #include < ...
- input file标签限制上传文件类型
用 input 的file类型标签上传文件,有时需要限制上传文件类型,添加accept属性可以实现 <input type="file" accept="image ...
- loj #137 and #6021
最小瓶颈路 加强版 重构树 最小生成树在合并 (x, y) 时,新建节点 z,link(x, z), link(y, z), 新建节点的权值为 w_{x,y}, 这样的 话任意两点的 answer 为 ...
- P3723 【[AH2017/HNOI2017]礼物】
被某大佬指出这是多项式板子!? 我们假设我们原始数列是\(a_i, c_i\), 旋转后的数列是\(a_i, b_i\),我们的增加量为x \[\sum_{i = 1}^n(a_i - b_i + x ...
- mpvue开发小程序
实例生命周期 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDes ...
- 《挑战30天C++入门极限》C++运算符重载赋值运算符
C++运算符重载赋值运算符 自定义类的赋值运算符重载函数的作用与内置赋值运算符的作用类似,但是要要注意的是,它与拷贝构造函数与析构函数一样,要注意深拷贝浅拷贝的问题,在没有深拷贝浅拷贝的情况下 ...
- Go工程项目方面注意
1.同一个文件夹下的包名必须相同 2.文件夹下go文件使用的包名不是必须同文件夹名,但建议包名同文件夹名 3.不用目录包名不同 4.调用不同包里面的函数格式:包名.函数名(...) 5.包导出给外部使 ...