VueJS - 如何在 ag-grid-vue 中自定义 columnDefs 的 headerName [英] VueJS - How to have a custom headerName of columnDefs in ag-grid-vue

问题描述

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

I am trying to display my header name in a new line, but i am unable to do it.

ag-grid-vue 版本:6.12.0

Version of ag-grid-vue: 6.12.0

这是我尝试过但没有奏效的方法:

Here is what i tried but it did not work out:

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:

I tried something like this to display the headerName in new line:

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

我想显示如下内容:

请告诉我如何做到这一点.这是官方文档:

Please tell me how i can do this. Here is the officially documentation:

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

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

and here is the plunker which shows the example and can be used to workout:

https://plnkr.co/edit/QGopxrvIoTPu2vkZ

推荐答案

here is a working solution >>https://plnkr.co/edit/Lr6cneCFiT91lCOD
使用相应的主题(alpine、balham 等)和您希望的高度或您拥有的任何其他 CSS 结构根据您的喜好进行调整.
如下所述，这受到这个人的工作的启发.

here is a working solution >> https://plnkr.co/edit/Lr6cneCFiT91lCOD
Adapt it to your liking with the according theme (alpine, balham and so on) and the height that you wish or any other CSS structure that you have.
As told below, this inspired by this guy's work.

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

A working solution can be done with the script below

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 与 Stackoverflow 线程很多hacky(但有效)的解决方案.似乎没有官方支持，所以最好的办法是检查那里并尝试各种 CSS 解决方案.

There is a github issue here with a Stackoverflow thread with a lot of hacky (but working) solutions. It looks like there is no official support for this, so your best bet would be to check there and try out the various CSS solutions.

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

If you have a hosted example that we can play with, I may help more but right now, I can only recommend reading the various comments and try to tinker the CSS with your dev tools ! :)

这篇关于VueJS - 如何在 ag-grid-vue 中自定义 columnDefs 的 headerName的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！