Vue.js VueJS-如何在ag网格vue中自定义ColumnDef的标题名称

我试图在新行中显示我的标题名称，但我无法这样做

ag grid vue版本：6.12.0

以下是我尝试过但没有成功的方法：

defaultColDef: {
        sortable: true,
        editable: true,
        resizable: true,
        suppressMenu: true
      },
columnDefs: [
  {
    headerName: 'Average low ',  // This value is displayed in a single line
    field: 'average_low',
    width: 200,
  },
  {
    headerName: 'Average high ', // Even this value is displayed in a single line
    field: 'average_high',
    width: 200,
  },
...
}

我尝试了类似这样的方法来在新行中显示headerName：

      {
        headerName: 'Avg. \n low ',  // This value is displayed in a single line
        field: 'average_low',
        width: 200,
      },
      {
        headerName: 'Avg. </br> high ', // Even this value is displayed in a single line
        field: 'average_high',
        width: 200,
      },

{
headerName:'Avg.\n low'，//此值显示在一行中
字段：“平均值低”，
宽度：200，
},
{
headerName:'平均值
高'，//即使此值也显示在一行中
字段：“平均值高”，
宽度：200，
},

我想显示如下内容：

请告诉我怎么做。以下是官方文件：

以下是plunker，它显示了示例，可用于训练：

---

编辑：这是一个有效的解决方案>>
根据您喜欢的主题（

alpine

、

balham

等）和您希望的高度或您拥有的任何其他CSS结构调整它。
如下文所述，这一点的灵感来源于

可以使用下面的脚本完成工作解决方案

const MIN_HEIGHT=80；//这条线就是你要找的！
函数自动调整标题（事件）{
如果（event.finished！==false）{
事件api设置人头高度（最小高度）；
const headerCells=document.queryselectoral（“#myGrid.ag header-cell-label”）；
设最小高度=最小高度；
headerCells.forEach（单元格=>{
minHeight=Math.max（minHeight，cell.scrollHeight）；
});
事件api设置人头高度（最小高度）；
}
}
（功能（）{
document.addEventListener（'DOMContentLoaded'，function（）{
var gridDiv=document.querySelector（“#myGrid”）；
变量gridOptions={
enableColResize:true，
enableSorting:true，
onColumnResized:autosizeHeaders，
onGridReady：自动调整大小的领导者，
columnDefs：[
{
headerName:“描述很长的标题”，
字段：“名称”，
标题类：“多行”
},
{
headerName:“又一个长标题”，
字段：“角色”，
标题类：“多行”
}
],
行数据：[
{name:'Niall'，role:'Developer'}，
{name:'Eamon'，role:'Manager'}，
{名字：'布莱恩'，角色：'音乐家'}，
{姓名：'Kevin'，角色：'Manager'}
]
};
新的agGrid.Grid（gridDiv，gridOptions）；
});
})();

github的Stackoverflow线程有一个问题，它有很多黑客（但仍在工作）的解决方案。看起来没有官方的支持，所以你最好的办法就是去那里看看并尝试各种CSS解决方案

---

如果您有一个托管示例，我们可以使用，我可能会提供更多帮助，但现在，我只能建议您阅读各种注释，并尝试使用您的开发工具修补CSS！：）

在这里你可以找到这个例子，请你试试，我尝试了其他各种方法，但没有成功链接的项目是空的如果你在那页下面你可以找到这个例子，在那里你可以使用plunker，这是一个链接，不是我所说的友好的调试方式。在codesandbox中托管它，它也将更接近您所拥有的。这是在vue中