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 grid 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

  

固定行的高度固定行的行高完全按照   正常行有一个区别 - 动态不可能   一旦设定就改变高度。然而，这很容易被解决   再次设置固定行数据，重置行高。   再次设置数据对于固定行不是问题，因为它没有   影响滚动位置，过滤，排序或组打开/关闭＆gt;如果数据被重置，则与正常行的位置一样。

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

您可以在ag-grid的官方文档中找到此example。