React中使用MaterialUI实现占满表格全宽的TableCell用于加载占位

• 核心实现思路：利用TableCell原生支持的colSpan属性让单元格跨所有列，配合居中对齐实现加载指示器居中展示
• 具体实现步骤：
  1. 首先从@material-ui/core引入加载组件CircularProgress
  2. 在TableBody内做条件渲染：数据加载中时渲染单行列，加载完成后渲染实际数据行

完整实现代码如下：

import { Typography, Table, TableHead, TableRow, TableCell, TableBody, CircularProgress } from '@material-ui/core';
import { useState, useEffect } from 'react';

const Example = () => {
  // 控制加载状态
  const [loading, setLoading] = useState(true);
  const [tableData, setTableData] = useState([]);

  // 模拟异步请求数据逻辑，可替换为你的实际接口请求
  useEffect(() => {
    const fetchData = async () => {
      // 模拟2秒请求耗时
      await new Promise(resolve => setTimeout(resolve, 2000));
      setTableData([/* 你的表格实际数据 */]);
      setLoading(false);
    };
    fetchData();
  }, []);

  return (
    <>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell align="center"><Typography> 1 </Typography></TableCell>
            <TableCell align="center"><Typography> Some </Typography></TableCell>
            <TableCell align="center"><Typography> Some</Typography></TableCell>
            <TableCell align="center"><Typography> Some </Typography></TableCell>
            <TableCell align="center"><Typography> Some </Typography></TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {loading ? (
            <TableRow>
              {/* colSpan值等于表格总列数即可占满整行 */}
              <TableCell colSpan={5} align="center">
                <CircularProgress />
              </TableCell>
            </TableRow>
          ) : (
            // 加载完成后渲染实际数据行
            tableData.map((row, index) => (
              <TableRow key={index}>
                {/* 此处替换为你的实际单元格内容 */}
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </>
  )
}

注意：colSpan的值需要和表格总列数保持一致，如果你表格列数是动态生成的，可以直接用列配置数组的长度作为colSpan的值，不用硬编码。如果需要调整加载区域的高度，可以给TableCell添加sx属性设置minHeight来适配你的表格样式。

内容的提问来源于stack exchange，提问作者BlackH3art