Question

我在React项目中使用了材料表。我有3个级别的数据树。这是第一个：

当我单击数据树表中“第一级”的两个项目中的第一项时，是否可以为其着色，因此可以很容易地看到它下面的值是子元素。像这样：

如果将数据传递给它时可以给它上色，我会更加高兴。这就是我传递数据的方式：

data={[
        {
          id: 1, // MAIN ELEMENT 
          name: "Parent",
          value: `Parent`,
        },
        {
          id: 2, //CHILD OF THE MAIN ELEMENT
          name: "Child",
          value: `Child`,
          parentId: 1,
        }]}

即使在打开父元素之前，是否还可以为父元素着色，因此很明显它是PARENT，其他是CHILD？

更新：

这是codeandbox示例。如您所见，当您打开Parent1时Parent2似乎位于Parent1下。我想弄清楚它不在下面。

https://codesandbox.io/s/jolly-germain-6fncr?file=/src/App.js

Answer 1

让我们首先谈谈这个问题。这既不是程序性问题也不是CSS问题。这就是您如何显示数据（换句话说，仅UX）的问题。

有几种实现方法，这是我的工作示例：https://codesandbox.io/s/withered-dust-hb882?file=/src/App.js

基本上，我只为父级添加一个第一列，就是这样。

Answer 2

好吧，使用CSS选择器很难实现onExapnd颜色更改。在这里，您将必须编写父TR检查和子Button rotation（90deg）检查的检查。要更改颜色而不进行onClick检查，可以使用以下CSS：

tr[level="0"] {
  background-color: #FF0000;
}

tr[level="1"] {
  background-color: #FF0033;
}

tr[level="2"] {
  background-color: #FF0066;
}

以JS方式，您可以使用以下代码（当然，您必须将其添加到每个表中或扩展表，或者将util lib与现成的rowStyle方法一起使用。）

import React from "react";
import MaterialTable from "material-table";
import SearchIcon from "@material-ui/icons/Search";
import RotateLeftIcon from "@material-ui/icons/RotateLeft";
import { ArrowUpward, ChevronRight } from "@material-ui/icons";

//import './styles.css';

export default () => {
  const constPathColors = {
    1: '#FFFF00',
    2: '#FFFF33',
    3: '#FFFF66',
    4: '#FFFF99',
    5: '#FFFFCC'
  };
  return (
    <MaterialTable
      style={{ width: "100%", margin: "3%" }}
      title="Income Statement"
      icons={{
        Filter: React.forwardRef((props, ref) => <SearchIcon ref={ref} />),
        Search: React.forwardRef((props, ref) => <SearchIcon ref={ref} />),
        ResetSearch: React.forwardRef((props, ref) => (
          <RotateLeftIcon ref={ref} />
        )),
        SortArrow: ArrowUpward,
        DetailPanel: ChevronRight
      }}
      columns={[
        {
          field: "name",
          title: "Category"
        },
        {
          field: "value",
          title: "Value",

          cellStyle: {
            textAlign: "center"
          }
        }
      ]}
      data={[
        {
          id: 1, // MAIN ELEMENT
          name: "Parent 1",
          value: `SomeParentValue`
        },
        {
          id: 2, //CHILD OF THE MAIN ELEMENT
          name: "Child 1-1",
          value: `Child Value`,
          parentId: 1
        },
        {
          id: 3, //CHILD OF THE MAIN ELEMENT
          name: "Child 1-2",
          value: `Child Value`,
          parentId: 1
        },
        {
          id: 4, //CHILD OF THE CHILD ELEMENT
          name: "Child 1-2-1",
          value: `Child Value`,
          parentId: 3
        },
        {
          id: 5, // MAIN ELEMENT
          name: "Parent 2",
          value: `SomeParentValue`
        }
      ]}
      parentChildData={(row, rows) => rows.find(a => a.id === row.parentId)}
      options={{
        paging: false,
        headerStyle: {
          backgroundColor: "#378FC3",
          color: "#FFF",
          fontSize: "17px",
          textAlign: "center",
          fontWeight: "bold"
        },
        rowStyle: rowData => {
          if(rowData.tableData.isTreeExpanded === false && rowData.tableData.path.length === 1) {
            return {};
          }
          const rowBackgroundColor = constPathColors[rowData.tableData.path.length];
          return {backgroundColor: rowBackgroundColor};
        }
      }}
    />
  );
};

该行在展开前具有默认颜色：

Confluent

展开后，它具有黄色（渐变取决于级别）背景色：

Answer 3

这就是我的树视图的样子。多亏了 left: `var(--left-before, ${0}px)，我可以将 :befores 放在任何我想要的位置

https://i.ibb.co/Wp9XJcc/childscapture.png

<块引用>

viewTableTree.styles.js

import { makeStyles } from '@material-ui/core/styles';

export const useViewTableTreeStyles = makeStyles(theme => ({
  root: {
    '& .MuiPaper-root': {
      boxShadow: 'none'
    },
    '& .MuiTable-root': {
      position: 'relative',
      overflow: 'hidden'
    },
    '& .MuiTableRow-root': {
      '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.04)' },
      '&:before': {
        content: '""',
        fontWeight: theme.font.weight.black,
        fontSize: theme.font.size.xxl,
        position: 'absolute',
        left: `var(--left-before, ${0}px)`,  //important trick here!
        width: '1px',
        height: '3.2rem',
        backgroundColor: theme.palette.basic.bright
      }
    }
  }
}));

然后在 MaterialTable 组件中

<块引用>

ViewTableTree.js

  <div className={classes.root}>
      <MaterialTable
        icons={tableIcons}
        data={rows}
        columns={cells}
        localization={{
          header: {
            actions: ''
          }
        }}
        options={{
          selection: false,
          paging: false,
          search: false,
          showTitle: false,
          toolbar: false,
          actionsColumnIndex: -1,
          rowStyle: rowData => {
            let styles = { transition: 'transform 300ms' };
            const levels = rowData.tableData.path.length === 1 ? 0 : rowData.tableData.path.length;
            styles = { ...styles, '--left-before': `${levels * 6}px` };

            return rowData.tableData.isTreeExpanded
              ? {
                  ...styles,
                  fontWeight: 600,
                  backgroundColor: 'rgba(77, 93, 241, 0.08)'
                }
              : styles;
          }
        }}
        {...props}
      />
    </div>

反应物料表：为数据树中的行着色

3 个答案: