假设我们需要设置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
最佳答案
您可以动态计算行高。
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/