效果如下：

代码如下：

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 //一共几列(不包括表头)} = propsconst [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>