ag-grid-vue修改全部字体

您可以使用 ag-grid-vue 中的 cellClass 动态设置单元格的 CSS 类，从而实现修改全部字体的效果。以下是一个示例：

<template>
  <ag-grid-vue
    :columnDefs="columnDefs"
    :rowData="rowData"
    :defaultColDef="defaultColDef"
    :getRowStyle="getRowStyle"
    :getCellClass="getCellClass"
  ></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
      }
    };
  },
  methods: {
    getCellClass(params) {
      return "custom-cell";
    }
  }
};
</script>

<style scoped>
.custom-cell {
  font-size: 16px;
  font-weight: bold;
  color: red;
}
</style>

在上面的示例中，我们定义了一个名为 "custom-cell" 的 CSS 类，包含了修改字体大小、加粗和颜色的样式。然后在 getCellClass 函数中，返回 "custom-cell" 类名，这样所有单元格都会应用该样式，从而实现了修改全部字体的效果。

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