英文:
Vaadin Flow 24 - Select or Combox Custom Return Value?
问题
我正在使用 Vaadin 24 - 并且想要一个可选择的项目列表（无论是 Select 还是 Combobox 组件） - 它将允许不同的显示和返回值。
例如 - 给定这个数据集：
ID 姓名
1 Joe
2 Sarah
3 Bill
4 Jennifer
我想让组件显示姓名，但返回ID。
在普通的HTML中，我会做类似于：
<select>
<option name="person" value="1">Joe</option>
<option name="person" value="2">Sarah</option>
<option name="person" value="3">Bill</option>
<option name="person" value="4">Jennifer</option>
</select>
在 Vaadin 中有实现这个的方法吗？
英文:
I'm using Vaadin 24 - and would like to have a selectable list of items (either Select or Combobox Component) - that will allow a different display and return value.
For example - given this dataset:
ID NAME
1 Joe
2 Sarah
3 Bill
4 Jennifer
I want the component to display the NAME, but return the ID.
In plain HTML I would do something like:
<select>
<option name="person" value="1">Joe</option>
<option name="person" value="2">Sarah</option>
<option name="person" value="3">Bill</option>
<option name="person" value="4">Jennifer</option>
</select>
Is there a way to do this in Vaadin?
答案1
得分: 0
我假设您在客户端使用Web组件，而不是Flow框架，因为这两个组件的Java API完全处理对象，而不是特定的值。
因此，在客户端上，vaadin-select和vaadin-combo-box组件的工作方式与您描述的方式完全相同：通过items属性提供给它们一组JS对象，并指定这些对象中哪个属性将显示为它们的标签（item-label-path），以及哪个属性将用作它们的值（item-value-path），如Combo Box页面上最顶部的TypeScript示例所示。
英文:
I'm assuming you're using the web components client-side, rather than the Flow framework, as the Java API of both components deals entirely in objects rather than specific values.
So, on the client-side, both the vaadin-select and vaadin-combo-box components work precisely as you describe: you give them a collection of JS objects through the items property, and specify which property in those objects is displayed as their labels (item-label-path) and which property is to be used as their values (item-value-path), as shown in the topmost TypeScript sample on the Combo Box page.
答案2
得分: 0
Koobie出马 - comboBox有两种方法：
setItems()是返回值，
setItemLabelGenerator()是显示项。
从文档中：
ComboBox<Country> comboBox = new ComboBox<>();
comboBox.setItems(DataService.getCountries());
comboBox.setItemLabelGenerator(Country::getName);
add(comboBox);
英文:
Koobie to the rescue - there are two methods for the comboBox:
setItems() which is the return value and
setItemLabelGenerator() which is the display item.
From the docs:
ComboBox<Country> comboBox = new ComboBox<>("Country");
comboBox.setItems(DataService.getCountries());
comboBox.setItemLabelGenerator(Country::getName);
add(comboBox);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论