support colspan and rowspan

pull/447/head
勤拭 9 years ago
parent bf28819158
commit e9cfca0d89

@ -0,0 +1,116 @@
# 表格行/列合并
- order: 13
表头只支持列合并columns = [{title: '姓名',`colSpan:2`}]。
表格支持行/列合并,可以指定内容对齐方式,colSpan或者rowSpan设值为0时,设置的表格不会渲染。
---
````jsx
import { Table } from 'antd';
//设置第四行colSpan=0(被合并掉,不会渲染)
const renderContent = function(value, row, index){
let obj = {
children: value,
props:{}
}
if(index === 4){
obj.props.colSpan = 0;
}
return obj;
}
const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text, row, index) {
if(index < 4){
return <a href="javascript:;">{text}</a>;
}else{
return {
children: <a href="javascript:;">{text}</a>,
props:{
align: 'center',
colSpan: 5
}
}
}
}
},{
title: '年龄',
dataIndex: 'age',
render: renderContent
},{
title: '家庭电话',
colSpan: 2,
dataIndex: 'tel',
render: function(value, row, index){
let obj = {
children: value,
props:{}
}
if(index === 2){
obj.props.rowSpan = 2;
}
if(index === 3){
obj.props.rowSpan = 0;
}
if(index === 4){
obj.props.colSpan = 0;
}
return obj;
}
},{
title: '手机号',
colSpan: 0,
dataIndex: 'phone',
render: renderContent
},{
title: '住址',
dataIndex: 'address',
render: renderContent
}];
const data = [{
key: '1',
name: '胡彦斌',
age: 32,
tel: '0571-22098909',
phone: 18889898989,
address: '西湖区湖底公园1号'
}, {
key: '2',
name: '胡彦祖',
tel: '0571-22098333',
phone: 18889898888,
age: 42,
address: '西湖区湖底公园1号'
}, {
key: '3',
name: '李大嘴',
age: 32,
tel: '0575-22098909',
phone: 18900010002,
address: '西湖区湖底公园1号'
},{
key: '4',
name: '李夫人',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: '西湖区湖底公园1号'
},{
key: '5',
name: '习大大',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: '西湖区湖底公园1号'
}];
ReactDOM.render(<Table columns={columns} dataSource={data} bordered={true} />
, document.getElementById('components-table-demo-colspan-rowspan'));
````

@ -78,8 +78,9 @@ var dataSource = new Table.DataSource({
|------------|----------------------------|-----------------|---------------------|---------|
| title | 列头显示文字 | String or React.Element | | |
| dataIndex | 列数据在 data 中对应的 key | String | | |
| colSpan | 表头列合并,设置为0时,不渲染 | Number | | |
| key | React 需要的 key | String | | |
| render | 生成复杂数据的渲染函数,参数分别为当前列的值,当前列数据,列索引 | Function(text, record, index) {} | | |
| render | 生成复杂数据的渲染函数,参数分别为当前列的值,当前列数据,列索引@return里面可以设置表格[行/列合并](#demo-colspan-rowspan) | Function(text, record, index) {} | | |
| filters | 表头的筛选菜单项 | Array | | |
| onFilter | 本地模式下,确定筛选的运行函数 | Function | | |
| sorter | 排序函数,本地模式下为一个函数,远程模式下为布尔值 | Function or Boolean | | 无 |

@ -55,7 +55,7 @@
"rc-slider": "~1.5.0",
"rc-steps": "~1.4.0",
"rc-switch": "~1.2.0",
"rc-table": "~3.3.0",
"rc-table": "~3.4.0",
"rc-tabs": "~5.4.3",
"rc-tooltip": "~3.0.1",
"rc-tree": "~0.16.2",

Loading…
Cancel
Save