Merge pull request #447 from ant-design/feature-colspan-rowspan

support colspan and rowspan

components/table/demo/colspan-rowspan.md

@@ -0,0 +1,120 @@
+# 表格行/列合并
+
+- order: 13
+
+表头只支持列合并，cell = [{title: '姓名', `colSpan: 2`}]。
+
+表格支持行/列合并，可以指定内容对齐方式，colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
+
+---
+
+````jsx
+import { Table } from 'antd';
+
+// 事例表中第四行合并了五列，除了第一列设置 colSpan = 5 外，其他列的第四行 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;
+    }
+
+    // 第三列的第四行被合并没了，设置 rowSpan = 0 直接不用渲染
+    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'));
+````

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 |  | 无 |

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.18.1",