在 Reactjs 中使用 Material-UI 在表格中显示树数据

问题描述

我目前正在做一个小项目，在这个项目中我使用了如图所示的树结构表！

enter image description here

由于图中是旧项目中的Table，我使用的是Ant Design库（首页有代码支持），所以创建这样的Table难度不大。代码形式如下：

const columns = [
  {
    title: '',dataIndex: 'name',key: 'name',width: '20%'
  },{
    title: '',dataIndex: 'User1',key: 'User1',width: '10%',},dataIndex: 'User2',key: 'User2',}
];

const data = [
  {
    key: 1,name: <h3 style={{ fontSize: "16px",color: "white" }}>Module 1</h3>,children: [],{
    key: 2,color: "white",}} className="level0">Module 2</h3>,children: [
      {
        key: 21,name: <p style={{ fontSize: "14px",color: "white" }}>Function name</p>,User1: <p style={{ fontSize: "14px",color: "white" }}>User 1</p>,User2: <p style={{ fontSize: "14px",color: "white" }}>User 2</p>,children: [
          {
            key: 211,name: <p style={{ fontWeight: "bold" }}>Function 1</p>,User1: '',User2: '',children: [
              {
                key: 2111,name: <p>Feature 1</p>,User1: <CheckBox />,User2: <CheckBox />,}
            ],{
            key: 221,name: <p style={{ fontWeight: "bold" }}> Function 2</p>,children: [
              {
                key: 2211,}
            ]
          }
        ],],];

return (
      <Table
        columns={columns}
        dataSource={data}
        pagination={{ pageSize: 5,hideOnSinglePage: true }}
      >
      </Table>
);
}

但是在 Material-UI 中，我不知道如何创建这样的表格！ 我才学了一个月 ReactJS，也是第一次用这个库。

你能告诉我怎么做吗？ 感谢阅读！

（英语不是我的母语，所以请原谅我的错误！）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）