react实现表头固定左侧，内容右侧循环，可换行_reactformitem怎么居左

效果如下：

代码如下：

js:

import React, {Component,useEffect,useState} from 'react';
import {Row, Col } from 'antd';
import style from './index.module.less';
 
const TableCricle = React.memo((props) => {
    const { 
        depNameList = [],// 科室列表
        inviterList = [],
        columns //一共几列(不包括表头)
    } = props
    const [rows,setRows] = useState();//一共几行表格
 
    const init = () => {
        let row = Math.ceil(inviterList?.length/columns)
        setRows(row);
    }
 
    useEffect(()=>{
        init()
    },[inviterList])
 
    return <>
        <Row className={`${style.line} ${style.tableBox}`}>
            {
                rows? Array.apply(null, { length: rows }).map((_,index) => {
                    return <>
                                <Col span={24%(columns+1)?columns:24/(columns+1)}  className={style.tableCell}>
                                    {
                                        depNameList.length>0 && depNameList.map(item => {
                                            return <div className={style[item.styleName]}>{item.name}</div>
                                        })
                                    }
                                </Col>
                                {
                                    inviterList.length>0 && inviterList.map((item,i)=>{
                                        if(index*columns-1 < i && i < (index+1)*columns) {
                                            return        <Col span={24%(columns+1)?columns:24/(columns+1)} className={style.tableCell}>
                                            {/* <div className={style.depName}>{ item.DepName||'-' }</div>
                                            <div className={style.doctorName}></div> */}
                                            {
                                                depNameList.length>0 && depNameList.map(val => {
                                                    return <div className={style[val.styleName]}>{item[val.valName]}</div>
                                                })
                                            }
                                        </Col>
                                        }
                                    })
                                }
                                {
                                    // 不足一行补全表格,需要补全的肯定只有最后一行
                                    index === rows-1 && inviterList?.length && inviterList.length < rows*columns ? Array.apply(null, { length:  rows*columns - inviterList.length }).map((_,j)=>{
                                        return <Col span={24%(columns+1)?columns:24/(columns+1)} className={style.tableCell}>
                                             {
                                                depNameList.length>0 && depNameList.map(val => {
                                                    return <div className={style[val.styleName]}>{j[val.valName]}</div>
                                                })
                                            }
                                    </Col>
                                    }):null
                                }
                        </>
                  }):null
            }
        </Row>
    </>
})
 
export default TableCricle

css:

.flex {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(51, 51, 51, 1);
    margin-left: -1px;
}
.tableBox {
  :global {
    // 重写样式，适配表格，数字表示总共几列
    .ant-col-1 {
      max-width: 100%;
    }
    .ant-col-3 {
      max-width: 33.33%;
    }
    .ant-col-5 {
      max-width: 20%;
    }
    .ant-col-7 {
      max-width: 14.28%;
    }
    .ant-col-9 {
      max-width: 11.11%;
    }
    .ant-col-11 {
      max-width: 9.09%;
    }
    .ant-col-13 {
      max-width: 7.69%;
    }
  }
  .tableCell {
    display: flex;
    flex-flow: column;
    .depName,.doctorName{
      .flex
    }
    .depName {
      height: 48px;
      margin-left: -1px;
      margin-top: -1px;
    }
    .doctorName {
      height: 64px;
      margin-top: -1px;
    }
  }
}

使用：

//表头
depNameList: [
    {
        name: '科室',
        styleName: 'depName',
        valName: 'DepName'// 表头对应需要展示的值的字段名称
    },
    {
        name: '专家',
        styleName: 'doctorName',
        valName: ''
    }
],
columns: 5, // 表格科室一共几列
inviterList: [],// 内容列表
 
<TableCricle depNameList={depNameList} inviterList={inviterList} columns={columns}></TableCricle>