Vaadin 组合框分隔符

Question

我目前正在开发一个 Vaadin 应用程序，我已经需要一个

ComboBox

项目之间有一些分隔符。我一直在四处寻找，目前似乎没有办法实现这一目标。

更具体：

• separator是什么意思？分隔符是

  ComboBox

  中的一个项目，大概无法选择。这个项目的标题应该是可定制的，以实现类似这样的效果：Section 1 Thing 1, Thing 2 Section 2 Thing 3, Thing 4
• 一定要加粗吗？ 不，这只是一个例子。我可以使用像“--第1节--”之类的东西，那里没有问题。
• 由于主要思想是使用

  ComboBox

  ，任何答案都应至少提供与其相同的功能。 即：过滤、添加元素……

到目前为止我尝试了什么：
我重写了

setInternalValue

的

ComboBox

方法，无法选择这样的分隔符：

public class ComboBoxWithSeparators() {
    @Override
    protected void setInternalValue(Object newValue) {
        Object oldValue = super.getValue();
        if(isSeparator)
            super.setInternalValue(oldValue);
        else
            super.setInternalValue(newValue);
    }
}

这有点管用，但是当您选择一个分隔符时，它会在选定框中显示几分之一秒，然后被旧元素覆盖。
所以，我的实际问题是： 有没有办法在

ComboBox

中不启用选择项目？

相关： 在

ComboBox

中添加一个项目并用JS禁用它

Answer 1

目前无法在 Vaadin 中获得带有分隔符的

ComboBox

之类的东西，但是可以使用一些解决方法来代替它：

• 菜单栏：

该组件支持分隔符、类别和启用/禁用项目。缺点是它不允许像

ComboBox

这样的过滤，但您可以为通常的选择添加快捷方式。

• Anidated

  ComboBox

  ：
  
  通过这种方式，您可以按类型或/和项目进行过滤，但您看不到您拥有的每个项目，因为它们是按类别/类型进行过滤的。当然，你可以添加一个包含所有元素的类别来绕过这个限制。

• ComboBox

  不可选择的项目：
  此变通方法就像通常的

  ComboBox

  ，但您正在覆盖

  #setInternalValue

  以使某些元素无法选择，例如：

  public class ComboBoxWithSeparators() {
      @Override
      protected void setInternalValue(Object newValue) {
          Object oldValue = super.getValue();
          if(isSeparator(newValue))
              super.setInternalValue(oldValue);
          else
              super.setInternalValue(newValue);
      }
  }
  

这里的问题是您可以实际上选择分隔符，但是

#setInternalValue

覆盖将恢复旧元素。这可能会导致奇怪的行为。

• @AndréSchildnativeSelectExt7：
  此选项提供与

  ComboBox

  相同的功能，具有不可选择的项目，但更好，因为它突出显示禁用的项目，并完全禁止选择其中之一。

Answer 2

这里有一个非可选分隔符的代码示例：https://vaadin.com/forum/thread/18441538/vaadin-14-combo-box-with-nonselectable-separators

诀窍是...

• (a) 禁用（不可选择的）选项组件（仅用于可视化）
• (b) 扩展 valueChangeListener，以便在用户选择不可选择的选项时清除 ComboBox。