Vue3中如何通过commonOptions统一设置ag-grid所有表格文本居中

你可以利用Ag-Grid提供的defaultColDef配置项，直接在共享的commonOptions中定义全局列的默认样式，这样所有表格的列都会自动继承这个配置，无需逐个修改columnDefs。

具体实现步骤 #

修改你的commonOptions对象，添加defaultColDef属性并设置cellStyle：

const commonOptions = {
  option: {
    pagination: true,
    suppressCellFocus: true,
  },
  // 全局列默认配置
  defaultColDef: {
    cellStyle: { textAlign: 'center' }
  },
  columnTypes: {
    dateYmdColumn: {
      valueFormatter: ({ value }) => value.ymd(),
    },
  }
  // ...其他原有配置
}

覆盖默认样式（可选） #

如果某个特定列需要使用不同的对齐方式，只需在该列的定义中重新设置cellStyle即可，它会自动覆盖全局默认配置：

// user.vue中的表格列定义
columnDefs: [
  {headerName: 'age', cellStyle: {textAlign: 'left'}}, // 单独设置左对齐
  {headerName: 'name'} // 继承全局默认的居中对齐
]

defaultColDef是Ag-Grid官方提供的用于统一配置所有列默认属性的方案，完全符合你通过共享配置实现全局样式统一的需求，比逐个修改列定义或全局修改CSS更灵活可控。

内容的提问来源于stack exchange，提问作者user9738537