ant design pro table的使用

ant design 自带组件

实现功能

1. 表头固定，表格内容滑动
2. 行合并

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Row, Col,Table } from 'antd';
import {
    Chart,
    Axis,
    Tooltip,
    Geom,
    Label
  } from "bizcharts";


class QualityReport extends PureComponent {
    render(){
        const renderContent = (value, row, index) => {
            const obj = {
              children: value,
              props: {},
            };
            return obj;
          };
          
          const columns = [
            {
              title: '业务',
              dataIndex: 'bussid',
              width: 150,
              render: (value, row, index) => { 
                const obj = {
                  children: value,
                  props: {},
                };
                if (index%7=== 0) {
                  obj.props.rowSpan = 7;
                }
                if(index%7 != 0 ){
                    obj.props.rowSpan = 0;
                }
                return  obj;
              },
            },
            {
              title: '日期',
              dataIndex: 'sla_date',
              render: renderContent,
              width: 150,
            },
            {
              title: '数值',
              dataIndex: 'sla_value',
              render:renderContent,
              width: 150,
            },
          ];
          
          const data = [
            {
              key: '1',
              bussid: 'membership',
              sla_date:  "2019-06-13",
              sla_value: "99.9992%",
            },
            {
              key: '2',
              sla_date: "2019-06-13",
              sla_value: "99.9992%",
            },
            {
              key: '3',
              sla_date:  "2019-06-13",
              sla_value: "99.9992%",
            },
            {
              key: '4',
              sla_date:  "2019-06-13",
              sla_value: "99.9992%",
            },
            {
              key: '5',
              sla_date:  "2019-06-13",
              sla_value: "99.9992%",
            },
            {
                key: '6',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '7',
                sla_date: "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '8',
                bussid: 'fenxiao',
                sla_date:  "2019-07-14",
                sla_value: "99.9992%",
              },
              {
                key: '9',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '10',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '11',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '12',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '13',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '14',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '15',
                bussid: 'nas',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '16',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '17',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '18',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '19',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
              {
                key: '20',
                sla_date:  "2019-06-13",
                sla_value: "99.9992%",
              },
          ];
        return(
           
            <Table title={()=><div style={{textAlign: 'center',backgroundColor:'#170A29'}}></div>}
            columns={columns} 
            dataSource={data} 
            bordered pagination={{ pageSize: 25 }} scroll={{ y: 800 }} 
            pagination={false} />
            
        );
    }
}

export default QualityReport;

效果