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=
再現例: 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=
著者からの別の手がかり: https://www.ag-grid.com/javascript-grid-row-height/index.php#gsc.tab=
ピン留めされた行の高さピン留めされた行の行の高さは、通常の行とまったく同じように機能しますが、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の公式ドキュメントにあります。