0

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

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

使用 AgGrid 参数的标题组组件

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

AgGrid 标头组 HTML 元素

但我真正想要替换的元素是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

瞧!有效!检查结果:

在此处输入图像描述

4

0 回答 0