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

Posted 2023-03-28

【中文标题】VueJS - 如何在 ag-grid-vue 中拥有 columnDefs 的自定义 headerName

【英文标题】：VueJS - How to have a custom headerName of columnDefs in ag-grid-vue

【发布时间】：2021-05-06 16:52:12

【问题描述】：

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

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/

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

https://plnkr.co/edit/QGopxrvIoTPu2vkZ

【参考方案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);
    );
)();

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

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

【讨论】：

ag-grid.com/documentation/vue/column-definitions这里你可以找到例子，请你试试，我尝试了各种其他方法但没有成功

链接项目为空

如果您在该页面下方找到示例，您实际上可以使用 plunker 进行锻炼，这是链接ag-grid.com/documentation/vue/column-definitions

并不是我所谓的友好调试方式。将其托管在代码沙箱中，它也会更接近您将拥有的。

plnkr.co/edit/QGopxrvIoTPu2vkZ 这是在 vue 中