Ag-grid - 使列适合内容并包装标题文本

Question

是否可以使列适合内容并将标题文本包装成多行？

像这样的东西：

Answer 1

您必须创建一个自定义标题来包装标题文本并设置标题高度。

https://www.ag-grid.com/javascript-grid-header-rendering/#header-group-component-1

 <template> <div class="ag-cell-label-container" :class="{'ag-header-cell-sorted-asc': params.column.sort === 'asc' && params.enableSorting, 'ag-header-cell-sorted-desc': params.column.sort === 'desc' && params.enableSorting, 'ag-header-cell-sorted-none': params.column.sort == '' && params.enableSorting, 'ag-column-menu-visible': params.column.filterActive }" role="presentation"> <div ref="eMenu" v-if="params.enableMenu" class="ag-header-icon ag-header-cell-menu-button" :class="{'ag-menu-expanded': params.column.filterActive }" @click="onMenuClick" @mouseover="showMenuButton=true" @mouseleave="showMenuButton=false"> <span class="ag-icon ag-icon-menu" v-if="showMenuButton"></span> </div> <div ref="eLabel" class="ag-header-cell-label" role="presentation" :title="params.displayName" @click="changeSortOrder"> <span ref="eText" class="ag-header-cell-text" role="columnheader">{{ params.displayName }}</span> <span ref="eFilter" v-if="params.column.filterActive" class="ag-header-icon ag-filter-icon" aria-hidden="true"> <span class="ag-icon ag-icon-filter"></span> </span> <span v-if="params.enableSorting" ref="eSortOrder" class="ag-header-icon ag-sort-order ag-hidden" aria-hidden="true">{{params.column.sort}}</span> <span v-if="params.enableSorting" ref="eSortAsc" :class="{active : params.column.sort === 'asc', 'ag-hidden': params.column.sort !== 'asc' }" class="ag-header-icon ag-sort-ascending-icon"> <span class="ag-icon ag-icon-asc"></span> </span> <span v-if="params.enableSorting" ref="eSortDesc" :class="{active : params.column.sort === 'desc', 'ag-hidden': params.column.sort !== 'desc'}" class="ag-header-icon ag-sort-descending-icon"> <span class="ag-icon ag-icon-desc"></span> </span> <span v-if="params.enableSorting" ref="eSortNone" :class="{active : params.column.sort == '', 'ag-hidden': params.column.sort != '' }" class="ag-header-icon ag-sort-none-icon"> <span class="ag-icon ag-icon-none"></span> </span> </div> </div> </template> <script> export default { name: 'grid-column-header', data () { return { showMenuButton: false } }, methods: { changeSortOrder (event) { this.params.progressSort(event.shiftKey) }, onMenuClick () { this.params.showColumnMenu(this.$refs.eMenu) } }, mounted () { } } </script> <style lang='less' scoped> .ag-header-cell-label { white-space: normal; /* allows header text to wrap */ margin-right: 24px; } .ag-header-cell-menu-button { width: 12px; height: 12px; } .ag-header-cell-menu-button:hover { opacity: 1; transition: opacity 0.2s, border 0.2s; } .ag-menu-expanded { opacity: 0; transition: opacity 0.2s, border 0.2s; } </style>

然后你会在你的 columnDefs 的每一列上引用它：

var columnDefs = [
    {
      headerName: 'Id',
      field: 'id',
      headerComponentFramework: Vue.extend(ColumnHeader) // This lets you use it
    }
  ]

在 gridOptions 上：

gridOptions: { headerHeight: 46 }

Answer 2

从 AG Grid 的 v28 开始，现在可以通过设置属性wrapHeaderText和autoHeaderHeight 。

const gridOptions = {
  defaultColDef: {
    resizable: true,
    wrapHeaderText: true,
    autoHeaderHeight: true,
  },
};

您可以在此Plunker中使用这些属性