Vuetify 连接 v-select 的项目文本中的两个字段
Vuetify concatenate two fields in v-select's item-text
有没有办法在 v-select 的项目文本字段中将两个字段连接在一起?
我让它为下拉列表值工作,但可见条目不显示这两个字段。
问题在这里:item-text="'${data.item.name}, ${data.item.group}'"
代码:
`<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
谢谢
在使用 <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>
见
供参考。
这也可以是一个更简单的解决方案,就像您要实现的解决方案一样:
<template slot="selection" slot-scope="data">
{{ data.item.name }}, {{ data.item.group }}
</template>
另请参阅实际操作:
对于 David Folkner:您可以将 :filter="customFilter"
属性 添加到自动完成组件,然后在 methods 块中添加 customFilter函数,实现自定义搜索。
例如,如果您的 items 列表由 n 个具有 id 的项目对象组成,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
}
}
<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>
使用 slot="selection"
<template slot="selection" slot-scope="item">
{{ item.name }}-{{ item.group }}
</template>
我们正在使用
"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 以便用户可以在更大的列表中键入搜索。
有没有办法在 v-select 的项目文本字段中将两个字段连接在一起?
我让它为下拉列表值工作,但可见条目不显示这两个字段。
问题在这里:item-text="'${data.item.name}, ${data.item.group}'"
代码:
`<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
谢谢
在使用 <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>
见
供参考。
这也可以是一个更简单的解决方案,就像您要实现的解决方案一样:
<template slot="selection" slot-scope="data">
{{ data.item.name }}, {{ data.item.group }}
</template>
另请参阅实际操作:
对于 David Folkner:您可以将 :filter="customFilter"
属性 添加到自动完成组件,然后在 methods 块中添加 customFilter函数,实现自定义搜索。
例如,如果您的 items 列表由 n 个具有 id 的项目对象组成,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
}
}
<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>
使用 slot="selection"
<template slot="selection" slot-scope="item">
{{ item.name }}-{{ item.group }}
</template>
我们正在使用
"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 以便用户可以在更大的列表中键入搜索。