Ag-Grid：修改单个列标题的 css/样式？

【问题标题】：Ag-Grid: Modify a single column header's css/style?Ag-Grid：修改单个列标题的 css/样式？
【发布时间】：2019-07-17 00:18:24
【问题描述】：

我有两个不同的列，希望它们显示为 1 个单列。为了产生这种错觉，我使用 cellStyle 为左列上的单元格设置 'border-right':'none'，但是，对于标题，我发现它并不容易。

我尝试过使用 headerComponentParams 并添加自定义模板，但是需要太多 HTML 才能删除右边框。

我曾尝试将 CSS 直接应用于我正在使用的组件，但我发现属性描述性不是很强，我最终编辑了所有标题。

仅列的功能就可以很好地发挥作用，其中之一是需要展开和折叠其他行的 V 形。我可能需要根据需要隐藏这个 V 形。知道我能做什么吗？

【问题讨论】：

标签： css angular ag-grid

【解决方案1】：

没有子标题的列分组对您很有用。

在您的列定义中，像通常这样定义 2 个子列 -

this.columnDefs = [
  {
    headerName: "Athlete Country",
    children: [
      {
        headerName: "Athlete",
        field: "athlete",
        width: 150,
      },
      {
        headerName: "Country",
        field: "country",
        width: 120
      }
    ]
  }]

在你的onGridReady

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.gridApi.setHeaderHeight(0);
    this.gridApi.setGroupHeaderHeight(30);
}

基于示例here

【讨论】：