如何删除 vaadin Grid multi-selection 列中的标题

Question

当使用 setSelectionMode(SelectionMode.MULTI) 将 Vaadin 8 Grid 设置为 multi-selection 模式时，会在 Grid 的左侧添加一列，每行都有一个复选框。

我对这种选择方法很满意，但是每个复选框的标题（例如“选择第 2 行”等）确实没有必要。有没有简单的方法可以删除这些复选框标题？

Answer 1

是的，有标题，但应该看不到。它是辅助功能。看起来你的主题和样式有问题，因为这个标签不应该在视口中呈现。所以它不应该是可见的，它仅供屏幕阅读器使用，以便盲人可以使用该选择。查看屏幕截图 DOM 应该是什么样子。

I change added .v-assistive-device-only-label that has all the same rules as in .v-assistive-device-only. Now, both the check square and caption are gone, leaving a empty cell to select. I'd like to learn how to make only the check square to show up but not the caption, if possible.

您需要在 css 选择器中包含 label 元素。如您所见，label 是具有 .v-assistive-device-only-label class 名称的元素的 child 元素。如果您以 .v-assistive-device-only-label 为目标，它会将 css 应用到该元素，因此它的 child 复选框也会受到影响。但是，当您添加 label 时，css 仅适用于 label，即 .v-assistive-device-only-label

的 child

.v-assistive-device-only-label label {
  position: absolute;
  top: -2000px;
  left: -2000px;
  width: 10px;
  owerflow: hidden;
}

如何删除 vaadin Grid multi-selection 列中的标题

How to remove caption in vaadin Grid multi-selection column

vaadin

vaadin8

vaadin-grid