react中使用antd table组件将第一列作为表头，横向展示数据

 由于在antd table组件API中没找到可以将表头竖向排列来展示数据的方法，所以自己写了个逻辑

正常效果

 

实现效果

 接口返回数据（取data）

字段过多，部分截图

 

 项目中对table组件进行了二次封装，header是传入table的column，data是传入table的dataSource
如果是正常展示的情况下面图里的header应该是header={[...this.state.headers,...Header]}

 接下来对数据进行处理

//首先定义好一个head.js文件，方便后续更改字段
const header= [
    {
        title: 'test1', width: 80, children: [
            { title: 'test_1', width: 150, dataIndex: 'fmaleNumber' },
            { title: 'test_1', width: 150, dataIndex: 'backMatingNumber' },
            { title: 'test_1', width: 150, dataIndex: 'weanMatingNumber' },
            { title: 'test_1', width: 150, dataIndex: 'savedayMattingRate' },
            { title: 'test_1', width: 150, dataIndex: 'fqMatingNumber' },
            { title: 'test_1', width: 150, dataIndex: 'khMatingNumber' }
        ]
    },{
        title: 'test2', width: 80, children: [
            { title: 'test_2', width: 150, dataIndex: 'fklNumbers' },
            { title: 'test_2', width: 150, dataIndex: 'fqNumber' },
            { title: 'test_2', width: 150, dataIndex: 'khNumber' },
            { title: 'test_2', width: 150, dataIndex: 'lcNumber' },
            { title: 'test_2', width: 150, dataIndex: 'gzNumber' },
            { title: 'test_2',  width: 150, dataIndex: 'bgzNumber' }
        ]
    }
];
export default header;

 在constructor中初始化state

import Header from './Head';
Class XXX extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchList: [],//table数据源
            hasSearchList: false,
            headers: [{
                dataIndex: 'columnHead',
                title: '项目',
                align: 'left',
                width: 280
            }, {
                dataIndex: 'whitespace',
                title: "",
                width: 1300
            }]//初始化headers
        };
    }
}

 在componentDidMount中处理表头，将其放到table的数据源中

    componentDidMount() {
        this.initSliderHead();
    }

    //初始化侧边表头
    initSliderHead() {
        let filterTitle = [];
        let sliderHead = [];
        Header.forEach(item => {
            filterTitle.push({title: item.title, dataIndex: item.dataIndex});
            if (item.children) {
                filterTitle = [...filterTitle, ...item.children.map(v => {
                    return {
                        title: v.title,
                        dataIndex: v.dataIndex
                    };
                })];
            }
        });
        //这里在进行一次循环主要是对id进行赋值，因为是前端自己控制的字段就只用了index来进行赋值，有多少字段整个table就有多少行，这个是固定的
        sliderHead = filterTitle.map((item, index) => {
            return {columnHead: item.title, key: index, dataIndex: item.dataIndex, id: index};
        });
        this.setState({
            searchList: sliderHead
        });
    }

 这个时候的效果，第一列的表头其实已经是数据源了

 

在拿到数据后 ，后端返回的对象有几个键值对，tablede的表头就应该有几列（外加第一列）

 

            //res.data是返回的数据源    
            if (res.code === 200) {
                    this.setState({
                        headers: [this.state.headers[0]]//点击搜索后重置表头
                    });
                    //获取后端返回对象数据的键值对
                    const keys = Object.values(res.data).map(item => item.name);//name对应键值对的键名
                    const values = Object.values(res.data);
                    //重新设置表头
                    this.setState({
                        headers: [...this.state.headers, ...keys.map(item => {
                            return {
                                dataIndex: item,
                                title: item
                            };
                        })]
                    });
                    //设置table数据源
                    const cList = this.state.searchList;
                    //循环每一行
                    cList.forEach((item, i) => {
                        //循环每一列数据
                        values.forEach((val, index) => {
                            if (Object.keys(val).includes(item.dataIndex)) {
                                item[keys[index]] = val[item.dataIndex];
                            }else {
                                item[keys[index]] = '';
                            }
                        });
                        item.id = i;
                    });
                    this.setState({
                        searchList: cList,
                        hasSearchList: true
                    });
                }