javascript - Ag-grid 在 Master/Detail 组件中设置自动高度

Question

假设我们需要设置 ag-grid 组件的自动高度，只需将 gridOptions 设置为 domLayout="autoHeight" 即可轻松完成。这适用于单个组件，但对于高度可以扩展的主从(父/子)组件，这不起作用。

同样的问题: https://github.com/ag-grid/ag-grid/issues/205

我需要深入调整它的 css，但仍然无法让它工作，

样式引用:https://www.ag-grid.com/javascript-grid-styling/

Ag 网格 DOM 布局:https://www.ag-grid.com/javascript-grid-width-and-height/#gsc.tab=0

重现示例: https://github.com/ag-grid/ag-grid-vue-example (见主/细节)

它正在调整 gridOptions getRowheight 或其嵌入的 css

对于相关的CSS:

.ag-root {
/* set to relative, so absolute popups appear relative to this */
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
/* was getting some 'should be there' scrolls, this sorts it out */
  overflow: hidden;
}

.ag-body {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

https://github.com/ag-grid/ag-grid/blob/master/dist/styles/ag-grid.css

里面还有一个笨蛋:

https://www.ag-grid.com/javascript-grid-master-detail/#gsc.tab=0

作者的另一条线索:https://www.ag-grid.com/javascript-grid-row-height/index.php#gsc.tab=0

Height for Pinned Rows Row height for pinned rows works exactly as per normal rows with one difference - it is not possible to dynamically change the height once set. However, this is easily got around by just setting the pinned row data again which resets the row heights. Setting the data again is not a problem for pinned rows as it doesn't impact scroll position, filtering, sorting or group open/closed> positions as it would with normal rows if the data was reset.

Answer 1

您可以动态计算行高。

getRowHeight: function (params) {
    if (params.node && params.node.detail) {
        var offset = 80;
        var allDetailRowHeight = params.data.callRecords.length * 28;
        return allDetailRowHeight + offset;
    } else {
        // otherwise return fixed master row height
        return 60;
    }
}

你可以找到这个 example在ag-grid的官方文档中。