如何将Vueform Multiselect组件的展示标签设置为序号而非对象属性值

解决方案 #

可以通过以下两种方式实现需求：

方案1：预存序号到数据源（最稳定，序号不会随数组动态变化改变）

1. 改造testData的计算逻辑，遍历数组时给每个项新增序号字段：

const testData = computed(() => {
      return [
        { name: 'Vue.js', id: 'vue' },
        { name: 'Angular', id: 'angular' }
      ].map((item, index) => ({
        ...item,
        // 新增序号字段，值为索引+1
        displayNo: index + 1
      }))
 })

return { testData }

2. 将组件的label属性绑定为新增的序号字段即可，如果需要保留原名称搜索功能，补充search-by属性：

<Multiselect 
  :options="testData" 
  label="displayNo"
  track-by="id"
  search-by="name"
/>

方案2：使用组件插槽自定义展示（无需修改数据源）

直接通过Multiselect提供的自定义插槽覆盖选中态的展示逻辑：

<Multiselect 
  :options="testData" 
  label="name"
  track-by="id"
>
  <!-- 可选：自定义下拉列表内的选项展示，不需要可以删除该插槽 -->
  <template #option="{ option, index }">
    {{ index + 1 }}. {{ option.name }}
  </template>
  <!-- 自定义选中后顶部显示的标签内容 -->
  <template #selection="{ option, index }">
    {{ index + 1 }}
  </template>
</Multiselect>

注意：该方案的序号会随options数组的动态增减实时变化，如果需要固定序号请选择方案1。

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