在角度 AG Grid 中的单元格之间添加垂直列线的正确方法是什么？答案

【问题标题】：What is the proper way to add vertical column lines between cells in angular AG Grid?在角度 AG Grid 中的单元格之间添加垂直列线的正确方法是什么？
【发布时间】：2021-07-14 07:30:15
【问题描述】：

使用 Angular 11 和 AG Grid。

我想打开单元格之间的垂直列线。我发现我可以使用 cellStyle 或 cellClass 设置我自己的单元格的样式……但这是否合适？

我可以设计类似...

{ border-right: 1px solid; }

是否没有 API/选项可以打开/关闭此类选项？行线是自动的，但列线需要手动设置样式是没有意义的。我怎么知道行颜色是什么来匹配它？

【问题讨论】：

标签： ag-grid ag-grid-angular

【解决方案1】：

我有同样的问题。我得出了同样的结论——我必须包含一种风格来实现这一点，因为我找不到打开它们的选项。

我没有用我自己的类设置单元格的样式，而是用适当的颜色覆盖了所有单元格：

.ag-theme-balham .ag-header-cell,
.ag-theme-balham .ag-header-group-cell,
.ag-theme-balham .ag-ltr .ag-cell {
    border-right: 1px solid #D9DDDF;
}

（我们重新设置了网格的样式，因此交替行和选定行的颜色与标准颜色不同，因此此颜色可能看起来不适合您的配色方案）

【讨论】：

感谢您的确认，弗莱奇。干杯。
你在哪里放置你的样式覆盖？我已经尝试了所有的 css/scss 位置，但似乎没有效果。我只能通过 columnDef 声明中的 cellStyle 函数来做到这一点。我宁愿在 css 中做。
我将一个类添加到并在我的 main.scss 中使用它。所以然后 .my-app .ag-theme-balham .ag-header-cell {border.....} 在 scss 文件中。如果您仍有问题，请告诉我，我会尝试为您找一个 plunker