ag-grid - 如何为 AgGrid 标题组设置自定义样式（不是类）？

Question

我在 VueJS 应用程序中使用 AgGrid，我需要为标题组设置自定义背景颜色。我在官方文档中搜索了一个解决方案，但没有一个能满足我的需要。

我已经尝试过该headerGroupComponent属性，但它并没有完全呈现我所需要的。这是我创建自定义组件并在那里使用它时的样子：

我注意到，当使用自定义headerGroupComponent组件时，使用的组件不会替换标题组包装器，而是替换它的内容。在下图中，箭头显示了正在渲染的自定义组件：

但我真正想要替换的元素是ag-header-group-cell类的元素。

我也知道可以设置 aheaderClass但这对我来说还不够。我需要应用内联样式。

---

但我需要的结果是这个（直接在浏览器中编辑）：

---

让我知道您是否需要更多信息来帮助我。提前致谢！

---

更新

这就是我设法解决问题的方法：在我的自定义组件中，名为AgGridStageHeaderGroup，我添加了一个与组件同名的类，该组件完全按照我的需要设置样式：

<template>
  <div class="**AgGridStageHeaderGroup** p-3" :style="style">
    {{ params.stage.name }}
  </div>
</template>

<script>
export default {
  name: 'AgGridStageHeaderGroup',
  computed: {
    style() {
      return {
        backgroundColor: this.params.stage.color
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.AgGridStageHeaderGroup {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--ag-border-color, #babfc7);
}
</style>

在列组定义中，我添加了一个p-0Bootstrap 类来重置标题组包装间距。我还发送了负责使用配置直接设置自定义颜色的数据headerGroupComponentParams。

瞧！有效！检查结果：

标签： ag-gridag-grid-vue