有没有办法在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>`
6条答案
按热度按时间tyg4sfes1#
使用
<v-select>
时,不仅需要为插槽item
定义模板,还需要为插槽selection
定义模板:见
https://vuetifyjs.com/components/selects#6-scoped-slots
以供参考。
这也可以是一个简单得多的解决方案,就像您正在尝试实现的解决方案:
另请观看其实际应用:
https://codepen.io/anon/pen/PEpaMM?editors=1011
8fsztsew2#
大卫·福尔克纳:您可以将
:filter="customFilter"
属性添加到autocomplete组件,然后在 methods 块中添加实现自定义搜索的 customFilter 函数。例如,如果您的 items 列表由n个具有 id、function 和 description 属性的item对象组成,则您应执行以下操作以同时搜索function和description属性:
自动完成组件:
方法:
bqujaahr3#
sc4hvdpw4#
我们正在使用
以下几点对我们很有效。
dbQueryResult是从API调用返回的项的列表,prop1、prop2和prop3是dbQueryResult中每行的属性
我相信这在v-select上也能用,尽管我们使用v-autocomplete,这样用户可以在更大的列表中输入search。
fdx2calv5#
使用插槽=“选择”
了解更多插槽https://vuetifyjs.com/en/api/v-autocomplete/#slots
chhkpiq46#
***项目文本***可以接受函数