如何在PrimeVue Select组件中展示对象的多个字段？

要在Select的选项中同时展示name和module字段，你可以利用PrimeVue提供的自定义选项插槽实现，具体修改如下：

替换原来依赖optionLabel的写法，改用#option插槽自定义每个选项的内容：

<Select id="OutVar" class="varInputs" v-model="selectedOutputVariable"
  :disabled="!isFormulationDataSet()" :options="outputVariables"
  optionValue="name"
>
  <template #option="slotProps">
    {{ slotProps.option.name }} ({{ slotProps.option.module }})
  </template>
</Select>

说明 #

• 移除optionLabel="name"，因为我们不再依赖组件默认的单字段映射逻辑
• 通过#option="slotProps"获取当前选项的完整对象数据，直接在插槽内拼接name和module字段，你可以根据需求调整显示格式（比如用斜杠分隔、添加样式等）
• optionValue保持不变，依然绑定name作为选中值的标识

修改后，下拉选项会同时展示两个字段的内容，示例格式为a name (a module name)。

内容的提问来源于stack exchange，提问作者Norm Strassner