VueJS - 如何在 ag-grid-vue 中拥有 columnDefs 的自定义 headerName

Question

我想在新行中显示我的 header 名字，但我做不到。

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,
  },
...
}

我试过类似这样的方法来在新行中显示 header名称：

      {
        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,
      },

我想显示这样的东西：

请告诉我该怎么做。这是官方文档：

https://www.ag-grid.com/documentation/vue/component-header/

这是显示示例并可用于锻炼的插件：

https://plnkr.co/edit/QGopxrvIoTPu2vkZ

Answer 1

编辑：这是一个可行的解决方案 >> https://plnkr.co/edit/Lr6cneCFiT91lCOD
根据您的喜好使用相应的主题（alpine、balham 等）和您希望的高度或您拥有的任何其他 CSS 结构。
如下所述，这受到 this guy's work.

的启发

可以使用下面的脚本完成一个可行的解决方案

const MIN_HEIGHT = 80; // this line is the one you're looking for ! 

function autosizeHeaders(event) {
    if (event.finished !== false) {
        event.api.setHeaderHeight(MIN_HEIGHT);
        const headerCells = document.querySelectorAll('#myGrid .ag-header-cell-label');
        let minHeight = MIN_HEIGHT;
        headerCells.forEach(cell => {
            minHeight = Math.max(minHeight, cell.scrollHeight);
        });
        event.api.setHeaderHeight(minHeight);
    }
}

(function() {
    document.addEventListener('DOMContentLoaded', function() {
        var gridDiv = document.querySelector('#myGrid');
        var gridOptions = {
            enableColResize: true,
            enableSorting: true,
            onColumnResized: autosizeHeaders,
            onGridReady: autosizeHeaders,
            columnDefs: [
                {
                    headerName: 'Header with a very long description',
                    field: 'name',
                    headerClass: 'multiline'
                },
                {
                    headerName: 'Another long header title',
                    field: 'role',
                    headerClass: 'multiline'
                }
            ],
            rowData: [
                {name: 'Niall', role: 'Developer'},
                {name: 'Eamon', role: 'Manager'},
                {name: 'Brian', role: 'Musician'},
                {name: 'Kevin', role: 'Manager'}
            ]
        };
        new agGrid.Grid(gridDiv, gridOptions);
    });
})();

Whosebug 线程有一个 github 问题 here，其中有很多 hacky（但有效）解决方案。似乎没有对此的官方支持，所以最好的办法是检查那里并尝试各种 CSS 解决方案。

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

VueJS - 如何在 ag-grid-vue 中拥有 columnDefs 的自定义 headerName

VueJS - How to have a custom headerName of columnDefs in ag-grid-vue

vue.js

ag-grid