如何更改 ag-grid 行组缩进？答案

【问题标题】：How to change ag-grid row group indent?如何更改 ag-grid 行组缩进？
【发布时间】：2021-01-30 02:21:12
【问题描述】：

我想为我的Tree Data 中的每个内部组更改（增加/减少）缩进量（当前默认为28px）。但是，我在文档中找不到任何相同的配置选项。我能找到的最接近的东西是suppressPadding，它完全禁用了填充。我尝试使用 DOM 穿刺 CSS，但发现每个级别都有不同的 CSS 类（例如 ag-row-group-indent-2），这使得在我的容器组件中编写通用 CSS 规则变得困难。

【问题讨论】：

标签： css sass ag-grid ag-grid-angular

【解决方案1】：

目前，我正在循环中覆盖样式，这似乎正在工作

// Taken from https://github.com/ag-grid/ag-grid/blob/master/dist/styles/ag-theme-base/sass/parts/_grid-layout.scss
// support 20 levels here because row group indentation is used for tree data which can be quite deep
@for $i from 1 to 20 {
    .ag-row-group-indent-#{$i} {
        padding-left: $i * 8px;
    }

    .ag-row-level-#{$i} .ag-row-group-leaf-indent {
        margin-left: 40px;
    }
}

【讨论】：

【解决方案2】：

您可以添加一个cellStyle 回调，根据其当前组级别计算每个单元格的padding-left 值。

defaultColDef: {
  cellStyle: (params) => {
    const { level } = params.node;
    const groupCell = params.value === params.node.key;
    const indent = 28; // change this value to your liking

    if (groupCell) {
      return {
        paddingLeft: (level + 1) * indent + "px"
      };
    }
  }
},

如果您使用这种方法，请记住抑制来自 agGrid 的初始 css 填充值，或者同时抑制 agGrid 和您的填充值相加。

::ng-deep .ag-cell-wrapper.ag-row-group[class*="ag-row-group-indent"],
::ng-deep .ag-cell-wrapper.ag-row-group-leaf-indent[class*="ag-row-group-indent"] {
  padding-left: 0;
}

现场演示

【讨论】：