Vuetify在v-select的item-text中连接两个字段

cvxl0en2  于 2023-02-09  发布在  Vue.js
关注(0)|答案(6)|浏览(154)

有没有办法在v-select的item-text字段中将两个字段连接在一起?
我让它为下拉列表值工作,但是可见条目不显示这两个字段。
问题就在这里:项目文本= "'${数据.项目名称},${数据.项目组} '"
代码:

`<v-select label="Select" v-bind:items="people" v-model="e11"
  item-text="'${data.item.name}, ${data.item.group}'"
  item-value="name" max-height="auto" autocomplete >
  <template slot="item" slot-scope="data">
    <v-list-tile-content>
      <v-list-tile-title 
         v-html="`${data.item.name}, ${data.item.group}`">
      </v-list-tile-title>
      <v-list-tile-sub-title 
         v-html="data.item.group">
      </v-list-tile-sub-title>
    </v-list-tile-content>
   </template> 
</v-select>`

注射笔示例:https://codepen.io/anon/pen/dJveWM?editors=1010
谢谢

tyg4sfes

tyg4sfes1#

使用<v-select>时,不仅需要为插槽item定义模板,还需要为插槽selection定义模板:

<template slot="selection" slot-scope="data">
  <v-chip
    close
    @input="data.parent.selectItem(data.item)"
    :selected="data.selected"
    class="chip--select-multi"
    :key="JSON.stringify(data.item)"
  >
    <v-avatar>
      <img :src="data.item.avatar">
    </v-avatar>
    {{ data.item.name }}
  </v-chip>
</template>


https://vuetifyjs.com/components/selects#6-scoped-slots
以供参考。
这也可以是一个简单得多的解决方案,就像您正在尝试实现的解决方案:

<template slot="selection" slot-scope="data">
  {{ data.item.name }}, {{ data.item.group }}
</template>

另请观看其实际应用:
https://codepen.io/anon/pen/PEpaMM?editors=1011

8fsztsew

8fsztsew2#

大卫·福尔克纳:您可以将:filter="customFilter"属性添加到autocomplete组件,然后在 methods 块中添加实现自定义搜索的 customFilter 函数。
例如,如果您的 items 列表由n个具有 idfunctiondescription 属性的item对象组成,则您应执行以下操作以同时搜索function和description属性:

自动完成组件:

<v-autocomplete v-model="itemSelected" :items="items" required box chips label="Select an Item" item-value="id" item-text="description" :filter="customFilter">
    <template slot="selection" slot-scope="data">
        <v-chip :selected="data.selected" class="chip--select">
            {{data.item.function}} - {{ data.item.description }}
        </v-chip>
    </template>
    <template slot="item" slot-scope="data">
        <v-list-tile-content>
            <v-list-tile-title v-html="data.item.function +' - '+ data.item.description"></v-list-tile-title>
        </v-list-tile-content>
    </template>
</v-autocomplete>

方法:

methods: {
    customFilter (item, queryText, itemText) {
        const textOne = item.function.toLowerCase()
        const textTwo = item.description.toLowerCase()
        const searchText = queryText.toLowerCase()
        return textOne.indexOf(searchText) > -1 || textTwo.indexOf(searchText) > -1
    }
}
bqujaahr

bqujaahr3#

<v-select
  :items="unitTypes"
  item-text="value"
  item-value="id"
  v-model="formData.unit_type"
  prepend-icon="mdi-ammunition"
  label="Unit Types"
  required
  :error-messages="errors"
>
  <template slot="selection" slot-scope="data">
    {{ data.item.value }} {{ data.item.type }}
  </template>
  <template slot="item" slot-scope="data">
    {{ data.item.value }} {{ data.item.type }}
  </template>
</v-select>
sc4hvdpw

sc4hvdpw4#

我们正在使用

"vue-cli-plugin-vuetify": "2.0.5",
"vue-eslint-parser": "^7.10.0",
"vue-template-compiler": "^2.6.11",

以下几点对我们很有效。

<v-autocomplete v-model="data.alarmInfoId" :items="dbQueryResult" item-value="prop3" :item-text="(row) => {return row.prop1+ ' - ' + row.prop2;}"/>

dbQueryResult是从API调用返回的项的列表,prop1、prop2和prop3是dbQueryResult中每行的属性
我相信这在v-select上也能用,尽管我们使用v-autocomplete,这样用户可以在更大的列表中输入search。

fdx2calv

fdx2calv5#

使用插槽=“选择”

<template slot="selection" slot-scope="item">
  {{ item.name }}-{{ item.group }}
</template>

了解更多插槽https://vuetifyjs.com/en/api/v-autocomplete/#slots

chhkpiq4

chhkpiq46#

***项目文本***可以接受函数

:item-text="item => `${item.first_value} ${item.second_value}`"

相关问题