From e9cfca0d89c806e10602d27a3f137ced0493ce82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=A4=E6=8B=AD?= Date: Thu, 29 Oct 2015 15:38:59 +0800 Subject: [PATCH] support colspan and rowspan --- components/table/demo/colspan-rowspan.md | 116 +++++++++++++++++++++++ components/table/index.md | 3 +- package.json | 2 +- 3 files changed, 119 insertions(+), 2 deletions(-) create mode 100644 components/table/demo/colspan-rowspan.md diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md new file mode 100644 index 0000000000..744b5133eb --- /dev/null +++ b/components/table/demo/colspan-rowspan.md @@ -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 {text}; + }else{ + return { + children: {text}, + 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( +, document.getElementById('components-table-demo-colspan-rowspan')); +```` diff --git a/components/table/index.md b/components/table/index.md index 4f851d3045..d5999568a0 100644 --- a/components/table/index.md +++ b/components/table/index.md @@ -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 | | 无 | diff --git a/package.json b/package.json index de80d37ebf..f86b39f1cd 100644 --- a/package.json +++ b/package.json @@ -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",