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

Question

我正在尝试在一个新行中显示我的标题名，但是我无法做到。

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

我想展示这样的东西：

​

​

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

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

这里有一个柱塞，它展示了这个例子，可以用来锻炼：

https://plnkr.co/edit/QGopxrvIoTPu2vkZ

Answer 1

编辑:这是一个有效的解决方案>> https://plnkr.co/edit/Lr6cneCFiT91lCOD

根据你喜欢的主题(alpine，balham等)和你想要的高度或其他的CSS结构来调整它。

如下所示，这是这家伙的工作的启发。

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

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);
    });
})();

有一个github问题，这里有一个堆栈溢出线程，它有很多黑客(但仍在工作)解决方案。这看起来似乎没有官方的支持，所以你最好的选择是在那里检查并尝试各种CSS解决方案。

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