仅将CSS样式应用于树数据中的最后一行

问题描述

如何通过CSS在树数据视图中选择最后一个孩子/行。我找不到选择器来指定该行是树视图中的最后一个子级。子行的长度也不固定，即树结构中可以有n个子行

例如

父行

-第一个子行

-可以是任何数字。之间的行数

-最后一个孩子

解决方法

您可以传递getRowStyle props回调来有条件地设置行样式。在这种情况下，您应该检查RowNode.lastChild的行。

EDIT ：如果您不想将样式应用于网格的最后一行，则可能希望在0级过滤掉RowNode s

<AgGridReact
  treeData
  getRowStyle={(e) => {
    if (e.node.lastChild && e.node.level > 0) {
      return { backgroundColor: "pink" };
    }
  }}
  {...}
/>

如果使用CSS模块，则可以使用getRowClass根据条件为要设置样式的特定行指定一个类。

<AgGridReact
  treeData
  getRowClass={(e) => {
    if (e.node.lastChild && e.node.level > 0) {
      return "last-child";
    }
    return "";
  }}
  {...}
/>

在您的CSS文件中

.last-child {
  background-color: pink;
}

实时演示