Vue2.6+Vuetify2.3中如何在v-select的item-text拼接两个字段

针对你的需求，有三种常用实现方式，可根据场景选择：

方法1：直接使用item-text的函数形式（最简洁） #

Vuetify 2.x的v-select支持item-text绑定函数，接收每个列表项作为参数，返回拼接后的文本。只需把原静态字符串绑定改为动态函数绑定：

<v-select
  :items="deplist"
  :item-text="item => `${item.moduleName}-${item.moduleNum}`"
  item-value="moduleId"
  v-model="selection"
></v-select>

注意要加冒号:item-text，表示绑定的是动态函数而非静态字符串。

方法2：提前处理数据源（适合复用场景） #

如果拼接后的文本需要在多处使用，可在获取数据后给每个列表项新增一个拼接字段，比如displayText：

// 示例：在获取数据的方法中处理
fetchDeplist() {
  // 模拟从接口获取原始数据
  const rawData = [
    { moduleId: 1, moduleName: 'Mathematics', moduleNum: '108' },
    { moduleId: 2, moduleName: 'Physics', moduleNum: '203' }
  ];
  
  this.deplist = rawData.map(item => ({
    ...item,
    displayText: `${item.moduleName}-${item.moduleNum}`
  }));
}

之后在v-select中直接使用这个新字段：

<v-select
  :items="deplist"
  item-text="displayText"
  item-value="moduleId"
  v-model="selection"
></v-select>

方法3：使用自定义插槽（适合样式自定义场景） #

如果需要给两个字段添加不同样式或复杂布局，可通过v-select的item和selection插槽完全自定义显示：

<v-select
  :items="deplist"
  item-value="moduleId"
  v-model="selection"
>
  <!-- 下拉列表中的选项样式 -->
  <template v-slot:item="{ item }">
    <span style="font-weight: 600;">{{ item.moduleName }}</span>
    <span style="margin: 0 8px;">-</span>
    <span>{{ item.moduleNum }}</span>
  </template>
  <!-- 选中后输入框内的显示样式 -->
  <template v-slot:selection="{ item }">
    <span>{{ item.moduleName }}-{{ item.moduleNum }}</span>
  </template>
</v-select>

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