效果如下：

代碼如下：

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>

總結

以上是生活随笔為你收集整理的react实现表头固定左侧，内容右侧循环，可换行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。