如何在 ag-grid 中的单个列上设置边框

Question

我有一个表，其前 n 列在某种程度上与其余 m 列不同。 我想在第 n 列（在标题和行中）右侧使用垂直边框来突出显示区别。

我们将 Balham 主题与 component.ts 中定义的 columnDefs 一起使用，component.html 包含：

<ag-grid-angular
  class="ag-theme-balham"
  [rowData]="vm.data$ | async"
  [columnDefs]="columnsDefs$ | async"
  [gridOptions]="gridOptions"
  [columnTypes]="columnTypes"
>
</ag-grid-angular>

在如何设置 AG-GRID 列垂直边框样式中，提出了使用主题自定义的建议，但我不希望所有列都有边框，只有一个。 即使在相关的 columnDef 中使用cellStyle: { 'border-right-colour': 'black' }也不会呈现任何内容，因为它被 Balham 的透明边框覆盖。

如何在表格中找到特定列并有选择地设置与其他列不同的样式？

Answer 1

您可以在要设置边框的列上添加headerClass和cellClass 。 例如，您可以在列上添加相同的类：

    {
      field: 'age',
      headerClass: ['age-border'],
      maxWidth: 90,
      cellClass: ['age-border'],
    },

.age-border {
  border-right: 3px solid red !important;
  border-left: 3px solid red !important
}

请参阅以下示例中的实现