cjd-parkball/src/components/table/demo/test.md

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

---
title: 表格列/行合并
title_en: collapse table-cell
category: 2
order: 1
---

`collapseRow`属性，接受一个数组，数组中的值应该是希望合并的数据的`dataIndex`，来指定合并的行，如果在`columns`中设置了`rowSpan`属性，则会忽略相应的`dataIndex`而采用传入的`rowSpan`进行使用者自定义的合并规则，** 该属性不影响`render`函数渲染个性化的数据 **，该属性的判断合并与否是根据原始数据中相同的`dataIndex`的值是否相同。
```jsx
import { Table } from 'parkball'

const columns = [{
  title: '名称',
  dataIndex: 'name',
},{
  title: '性别',
  dataIndex: 'sex',
},{
  title: '年龄',
  dataIndex: 'age',
},{
  title: 'oa 编码',
  dataIndex: 'code',
},{
  title: '手机号',
  dataIndex: 'mobile',
  render: (text, row, index) => <div style={{ color: (index === 2 ? 'black' : 'red') }}>{text}</div>
},{
  title: '联系人',
  dataIndex: 'contact',
},{
  title: '联系方式',
  dataIndex: 'contactMobile',
},{
  title: '负责人',
  dataIndex: 'owner',
},{
  title: '负责人手机号',
  dataIndex: 'ownerMobile',
},{
  title: '所在省市',
  dataIndex: 'region',
},{
  title: '所属街道',
  dataIndex: 'street',
},{
  title: '状态',
  dataIndex: 'status',
},{
  title: '操作',
  dataIndex: 'action',
  operationItemLength: 2,
  render: (text, record, index) => [
    <a href="#">操作1</a>,
    <a href="#">操作2</a>,
    <a href="#">操作3</a>,
    <a href="#">操作4</a>,
    <a href="#">操作5</a>,
    <a href="#">操作6</a>,
  ]
}]

const dataSource = [{
  name: 'vico',
  mobile: 15167190000,
  key: 1,
  'sex': 1,
  'age': 1,
  'code': 1,
  'contact': 1,
  'contactMobile': 1,
  'owner': 1,
  'ownerMobile': 1,
  'region': 1,
  'street': 1,
  'status': 1,
},{
  name: 'vico',
  mobile: 15167190000,
  key: 2,
  'sex': 2,
  'age': 2,
  'code': 2,
  'contact': 2,
  'contactMobile': 2,
  'owner': 2,
  'ownerMobile': 2,
  'region': 2,
  'street': 2,
  'status': 1,
},{
  name: 'sherry',
  mobile: 18758110000,
  key: 3,
  'sex': 1,
  'age': 1,
  'code': 1,
  'contact': 1,
  'contactMobile': 1,
  'owner': 1,
  'ownerMobile': 1,
  'region': 1,
  'street': 1,
  'status': 1,
},{
  name: 'sherry',
  mobile: 15167190000,
  key: 4,
  'sex': 2,
  'age': 2,
  'code': 2,
  'contact': 2,
  'contactMobile': 2,
  'owner': 2,
  'ownerMobile': 2,
  'region': 2,
  'street': 2,
  'status': 1,
},{
  name: 'vico',
  mobile: 15167190000,
  key: 5,
  'sex': 1,
  'age': 1,
  'code': 1,
  'contact': 1,
  'contactMobile': 1,
  'owner': 1,
  'ownerMobile': 1,
  'region': 1,
  'street': 1,
  'status': 1,
},{
  name: 'vico',
  mobile: 15167190000,
  key: 6,
  'sex': 2,
  'age': 2,
  'code': 2,
  'contact': 2,
  'contactMobile': 2,
  'owner': 2,
  'ownerMobile': 2,
  'region': 2,
  'street': 2,
  'status': 1,
}]

ReactDOM.render(
  <Table custom dragMode="column" collapseRow={['name', 'mobile', 'status']} dataSource={dataSource} bordered columns={columns}/>,
  mountNode
)
```