美文网首页react+dva+antd
antd table合并单元格

antd table合并单元格

作者: 这样就好_yang | 来源:发表于2019-08-05 10:10 被阅读3次

最近项目中遇到一个问题,antd table的单元格合并问题,并且数据是包含子元素的数据类型。

import React from 'react';
import { Table} from 'antd';
class MyTable extends React.Component {
    renderContent = (value, row, index) => {
        const obj = {
          children: value,
          props: {},
        };
        if (row.isMerge) {
          obj.props.rowSpan = row.rowSpan;
        }
        return obj;
      };
      
      columns = [
        {
          title: '科室',
          dataIndex: 'team',
          render: this.renderContent
        },
        {
          title: '停诊次数',
          dataIndex: 'suspend',
          render: this.renderContent,
        },
        {
          title: '替诊次数',
          dataIndex: 'replace',
          render: this.renderContent,
         
        },
        {
          title: '总计',
          dataIndex: 'count',
          render: this.renderContent,
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
        },
      ];
      
      data = [
        {
          key: '1',
          team: '心中诊疗中心',
          suspend: 32,
          replace: 5,
          count: 37,
          phone: 18889898989,
          rowSpan: 3,
          isMerge: true,
          children: [
            {
                key : '2',
                phone: 18889898989,
                rowSpan: 0,
                isMerge: true,
            },
            {
                key: '22',
                phone: 18889898989,
                rowSpan: 0,
                isMerge: true,
              },
              
          ]
        },
        {
          key: '3',
          team: '眼科',
          phone: 18889898888,
          suspend: 10,
          repalce: 3,
          count: 13,
        },
        {
          key: '4',
          team: '小儿康复',
          phone: 18900010002,
          suspend: 23,
          replace: 1,
          count:24,
        },
        {
          key: '5',
          team: '肝胆外科',
          phone: 18900010002,
          rowSpan: 3,
          isMerge: true,
          suspend: 23,
          replace:5,
          count: 28,
          children: [
              {
                key: '6',
                phone: 18900010002,
                rowSpan: 0,
                isMerge: true,
              },
              {
                key: '7',
                phone: 18900010002,
                rowSpan: 0,
                isMerge: true,
              }
          ]
          
        },
        {
          key: '8',
          team: '血管外科',
          phone: 18900010002,
          suspend: 15,
          replace: 6,
          count:21,

        },
      ];
    render() {
       
        return (            
            <div> 
                <Table 
                    columns={this.columns} 
                    dataSource={this.data} 
                    bordered 
                    expandIconAsCell={false}
                    defaultExpandAllRows={true}
                    expandIconColumnIndex={-1}
                />
            </div>
        );
    }
}
export default MyTable;
表格.png

相关文章

网友评论

    本文标题:antd table合并单元格

    本文链接:https://www.haomeiwen.com/subject/pgspdctx.html