ag-grid设置表头样式

您可以使用`headerClass`属性来设置表头的样式，例如：

columnDefs: [
  { headerName: 'Name', field: 'name', headerClass: 'my-header-class' },
  // ...
]

然后，在CSS中定义`my-header-class`样式，例如：

.my-header-class {
  background-color: #f1f1f1;
  font-weight: bold;
  text-align: center;
}

这将使表头的背景颜色变为灰色，文本居中，并且加粗。

相关问题

ag-grid表头单元格添加图标

要在 ag-grid 表头单元格中添加图标，可以使用 ag-grid 提供的自定义表头组件（Header Component）。以下是一个示例：

1. 在 gridOptions 中定义 Header Component：

gridOptions = {
  // ...
  components: {
    customHeader: CustomHeaderComponent
  },
  // ...
};

2. 创建 CustomHeaderComponent 组件：

import {Component} from "@angular/core";

@Component({
    selector: 'custom-header',
    template: `
        <div class="ag-cell-label-container" role="presentation">
            <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>
            <span ref="eLabel" class="ag-header-cell-label" role="presentation">
                <i class="fa fa-filter"></i>
                {{params.displayName}}
            </span>
        </div>
    `
})
export class CustomHeaderComponent {
    params: any;

    agInit(params: any): void {
        this.params = params;
    }
}

在这个示例中，我们使用了 Font Awesome 图标库中的一个图标（`fa-filter`）。你可以在 `eLabel` span 标签内添加任何 HTML 代码和样式，以便自定义表头单元格的样式。

3. 在列定义中使用 Header Component：

columnDefs = [
  {
    headerName: "Column A",
    field: "A",
    headerComponent: 'customHeader'
  },
  // ...
];

最后，将 `headerComponent` 属性设置为 `customHeader`，以在表头单元格中使用自定义的组件。

这样，就可以在 ag-grid 表头单元格中添加图标了。

如何在全局修改ag-grid的字体样式

您可以在全局 CSS 样式表中设置 ag-grid 的样式，从而实现在全局修改 ag-grid 的字体样式的效果。以下是一个示例：

<template>
  <ag-grid-vue
    :columnDefs="columnDefs"
    :rowData="rowData"
    :defaultColDef="defaultColDef"
  ></ag-grid-vue>
</template>

<script>
export default {
  data() {
    return {
      columnDefs: [
        { headerName: "姓名", field: "name" },
        { headerName: "年龄", field: "age" },
        { headerName: "性别", field: "gender" }
      ],
      rowData: [
        { name: "张三", age: 18, gender: "男" },
        { name: "李四", age: 22, gender: "女" },
        { name: "王五", age: 25, gender: "男" }
      ],
      defaultColDef: {
        sortable: true,
        filter: true
      }
    };
  }
};
</script>

<style>
.ag-cell,
.ag-header-cell {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: red;
}
</style>

在上面的示例中，我们在 style 标签中定义了 ag-cell 和 ag-header-cell 的样式，包含了修改字体家族、大小、加粗和颜色的样式。这样所有的单元格和表头都会应用该样式，从而实现了在全局修改 ag-grid 字体样式的效果。

您可以根据需要修改样式内容，实现其他样式效果的设置。