如何在全局修改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 字体样式的效果。

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