BootstrapVue中<b-form-select>如何拼接两个JSON字段作为展示文本

核心原因说明 #

text-field 属性仅支持传入单个字段名作为选项文本的读取字段，不支持直接传入拼接表达式，因此你之前的尝试无法生效。

方案一：预处理选项数据（推荐） #

直接在现有的sortedPersons计算属性中为每条数据新增拼接好的显示字段，同时修正原有的无效排序逻辑：

sortedPersons() {
  // 复制原数组并新增显示字段
  const processedArray = this.json.map(item => ({
    ...item,
    // 拼接要求格式的显示文本
    displayText: `${item.Name} (${item.Age})`
  }))
  // 按 姓名升序->年龄升序 规则排序
  return processedArray.sort((a, b) => {
    // 先比较姓名
    if (a.Name < b.Name) return -1
    if (a.Name > b.Name) return 1
    // 姓名相同则比较年龄（转数字避免字符串排序异常）
    return Number(a.Age) - Number(b.Age)
  })
}

修改组件属性绑定：

<b-form-select 
  :options="sortedPersons" 
  text-field="displayText" 
  value-field="ID"
></b-form-select>

方案二：使用插槽自定义渲染 #

如果你不想改动原数据结构，可以直接用组件的选项插槽自定义显示内容：

<b-form-select :options="sortedPersons" value-field="ID">
  <template #option="{ option }">
    {{ option.Name }} ({{ option.Age }})
  </template>
</b-form-select>

注：该方案仍需要按方案一中的逻辑修正原排序规则，原直接比较对象的写法无法实现按姓名+年龄排序的效果。

两种方案最终都可以实现下拉选项显示「姓名(年龄)」格式文本，选中值为对应条目的ID，可直接传递给父组件使用。

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