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

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

我需要调整其CSS,但仍然无法使其正常工作,

javascript - 在主/详细信息组件中的Ag-grid设置自动高度-LMLPHP

样式引用: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

最佳答案

您可以动态计算行高。

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

关于javascript - 在主/详细信息组件中的Ag-grid设置自动高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46661748/

10-11 12:29
查看更多