在以下位置使用Vaadin 14/Flow Grid的内联java编辑示例：https://vaadin.com/docs/latest/ds/components/grid/#inline-仅编辑java（忽略保存和取消部分）如何为紧凑的网格添加编辑按钮。所有其他单元格的高度似乎都是30px，但addComponentColumn（）的高度似乎是46px。有一个setWidth（）方法，但没有set Height（）。我的代码是：
Column<T> editColumn = addComponentColumn(t -> {
Button editButton = new Button("Edit");
editButton.addThemeVariants(ButtonVariant.LUMO_SMALL);
editButton.addClickListener(click -> {
if(getEditor().isOpen())
getEditor().cancel();
getEditor().editItem(t);
});
return editButton;
})
例如，要更改宽度，我可以< code > edit column . set width(" 150 px ")，但我似乎无法调整高度，因此如果我使用< code > grid . addthemevariants(grid variant。LUMO_COMPACT)它将以紧凑的方式呈现行。无论我做什么，这些行似乎都以正常高度呈现。
更新-只是添加它似乎是vaadin-grid-cell-content有额外的填充。使用较小的按钮会有所帮助，但是对于带有按钮的列来说仍然有太多的填充。我不确定如何用编辑/保存按钮来调整该列。
您可以检查此示例以在网格单元格中呈现几乎没有填充的样式：https://cookbook.vaadin.com/grid-dense-theme
要应用它，您需要添加< code > @ CSS import(theme for = " vaa din-grid "，value = " recipe/dense grid/dense grid . CSS ")
并使用此css：
:host([theme~="dense"]) [part~="cell"] {
min-height: var(--lumo-size-xxs);
}
:host([theme~="dense"]) {
font-size: var(--lumo-font-size-xs); // use the font size you prefer
}
:host([theme~="dense"]) [part~="cell"] ::slotted(vaadin-grid-cell-content) {
padding: 1px var(--lumo-space-s);
}
:host([theme~="dense"]:not([theme~="no-row-borders"])) [part="row"][first] [part~="cell"]:not([part~="details-cell"]) {
border-top: 0;
min-height: calc(var(--lumo-size-xxs) - var(--_lumo-grid-border-width));
}
默认情况下，即使在紧凑模式下，Vaadin Grid也会在单元格中进行一些填充。
如果要删除一个单元格的填充，可以在列上添加类名生成器：
grid.addComponentColumn(t -> new Button(t)).setClassNameGenerator(e -> "no-padding-cell");
并使用此 css 删除填充：
[part~="cell"].no-padding-cell ::slotted(vaadin-grid-cell-content) {
padding: 0px;
}
您可以调整按钮的高度以达到所需的高度。例如：
editButton.getStyle()
.set("margin", "0")
.set("--lumo-button-size", "20px")
.set("--lumo-font-size-s", "12px");
将＜code＞第三级内联＜/code＞主题变量应用于按钮会删除其自身的所有垂直填充，因此这可能会有所帮助。
