javascript 在v-select中自定义项目文本

atmip9wb  于 2023-06-28  发布在  Java
关注(0)|答案(6)|浏览(129)

请告诉我我们是否可以为v-select定制item-text
我想定制v-select中的每个项目,类似于以下内容:

:item-text="item.name - item.description"
2nbm6dog

2nbm6dog1#

是的,你可以使用scoped slot,如文档中所述,并提供一个template
对于v-select,您有两个scoped slot

  • selection:描述v-select在选中时应如何呈现项
  • item:描述v-select在打开时应如何呈现项

它看起来像这样:

<v-select> // Don't forget your props
  <template slot="selection" slot-scope="data">
    <!-- HTML that describe how select should render selected items -->
    {{ data.item.name }} - {{ data.item.description }}
  </template>
  <template slot="item" slot-scope="data">
    <!-- HTML that describe how select should render items when the select is open -->
    {{ data.item.name }} - {{ data.item.description }}
  </template>
</v-select>

CodePen with a complex example
关于V-Select中的作用域插槽的Vuetify文档

编辑Vuetify 1.1.0+:这些插槽也可用于新组件v-autocompletev-combobox,因为它们继承自v-select
Vue 2.6+版本编辑,替换:

  • slot="selection" slot-scope="data"通过v-slot:selection="data"
  • slot="item" slot-scope="data"通过v-slot:item="data"
8ftvxx2r

8ftvxx2r2#

速记:

:item-text="item => item.name +' - '+ item.description"
fnatzsnv

fnatzsnv3#

插槽删除对焦时的自动选择。
item-text类型可以是:string | array | function
那么我们就可以:

:item-text="text"

methods: {
  text: item => item.name + ' — ' + item.description
}
ua4mk5z4

ua4mk5z44#

下面是一个简单的代码示例:

<template>
  <v-select
    label="Names"
    v-model="name"
    :items="names"
    item-value="id"
    item-text="name"
    return-object
  >
    <template v-slot:selection="{ item }">
      {{ getText(item) }}
    </template>
    <template v-slot:item="{ item }">
      {{ getText(item) }}
    </template>
  </v-select>
</template>

<script> 
export default {
  data: () => ({
    names: [
      { id: 1, name: 'Paul', age: 23 },
      { id: 2, name: 'Marcelo', age: 15 },
      { id: 3, name: 'Any', age: 30 },
    ],
    name: null,
  }),
  methods: {
    getText(item) => `${item.name} - ${item.text}`,
  },
}   
</script>

以下为参考文献:https://vuetifyjs.com/en/components/autocompletes#advanced-slots

11dmarpk

11dmarpk5#

如果你不想处理槽或其他方法来操作item-text。这里有另一种不同的方法来实现相同的结果。
只需添加一个新的“displayname”键:使用computed方法动态地将值对添加到v-model集合中,并将其用作select的v-model,将new键用作item-text

computed: {
  addDisplayname() {
    return names.map(v => ({ ...v,
      displayname: v.name + ' - ' + v.description
    }))
  }
}
uwopmtnx

uwopmtnx6#

最简单的方式,没有插槽和最小的逻辑。您可能希望使用item-title

<v-select
   :item-title="(item)=>`${item.name}-${item.description}`"
   v-model="selectedItem"
   :items="items"/>

相关问题