将自定义数据属性添加到 Vuetify v-select 选项
Add custom data attribute to Vuetify v-select options
我正在使用 v-autocomplete 组件列出 selector 中的项目。由于 v-autocomplete 只是一个高级 v-select,我认为 v-select 的答案也适用于 v-autocomplete。
在我的列表中,我的项目具有不同的状态,应该以某种方式进行标记。所以我想根据项目 属性 向选项添加数据属性。如果我至少可以添加一个不同的 class,那也会有所帮助。但是因为我没有任何选项元素可以添加这些属性,所以我找不到方法。
我的物品看起来像:
{value:1,text:"Option 1",status:"finished"},{value:2,text:"Option 2",status:"running"},{value:3,text:"Option 3",status:"scheduled"}
想法是根据选项的状态以不同的方式设置 select 中选项的样式。所以我想实现这样的目标:
<v-autocomplete
v-model="selectedItem"
:items="items"
:item-status="item.status">
</v-autocomplete>
这可能吗?
听起来您需要的是利用可用于 v-autocomplete 元素的 item
slot。
<template v-slot:item="{ item }">
<div :class="getItemClass(item)">
{{ item.text }}
</div>
</template>
除了使用 getItemClass(item)
方法,您还可以将 status: className
配对保留在组件 data/computed 内的对象中。语法将更改为 itemClass[item]
.
插槽允许您自定义下拉列表中的列表项。您甚至可以使用它来添加不同颜色的不同图标来表示项目状态。
如果您想在选择项目时自定义外观,可以为 selection
slot 创建一个类似的模板。
您可以根据 status
设置 selected
选项的样式,这是基本思路,但您肯定可以使其更具动态性。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
auto: [{value:1,text:"Option 1",status:"finished"},{value:2,text:"Option 2",status:"running"},{value:3,text:"Option 3",status:"scheduled"}],
selectedAuto: '',
}
},
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<v-autocomplete
v-model="selectedAuto"
:items="auto"
:item-status="auto.status"
>
<template slot="selection" slot-scope="data">
<!-- HTML that describe how select should render selected items -->
<v-list-item-action-text>
<span v-if="data.item.status == 'finished'" class="green--text">
{{ data.item.text }}
</span>
<span v-if="data.item.status == 'running'" class="red--text">
{{ data.item.text }}
</span>
<span v-if="data.item.status == 'scheduled'" class="blue--text">
{{ data.item.text }}
</span>
</v-list-item-action-text>
</template>
<template slot="item" slot-scope="data">
<!-- HTML that describe how select should render items when the select is open -->
<v-list-item-action-text>
{{ data.item.text }}
</v-list-item-action-text>
</template>
</v-autocomplete>
</v-app>
</div>
我正在使用 v-autocomplete 组件列出 selector 中的项目。由于 v-autocomplete 只是一个高级 v-select,我认为 v-select 的答案也适用于 v-autocomplete。
在我的列表中,我的项目具有不同的状态,应该以某种方式进行标记。所以我想根据项目 属性 向选项添加数据属性。如果我至少可以添加一个不同的 class,那也会有所帮助。但是因为我没有任何选项元素可以添加这些属性,所以我找不到方法。
我的物品看起来像:
{value:1,text:"Option 1",status:"finished"},{value:2,text:"Option 2",status:"running"},{value:3,text:"Option 3",status:"scheduled"}
想法是根据选项的状态以不同的方式设置 select 中选项的样式。所以我想实现这样的目标:
<v-autocomplete
v-model="selectedItem"
:items="items"
:item-status="item.status">
</v-autocomplete>
这可能吗?
听起来您需要的是利用可用于 v-autocomplete 元素的 item
slot。
<template v-slot:item="{ item }">
<div :class="getItemClass(item)">
{{ item.text }}
</div>
</template>
除了使用 getItemClass(item)
方法,您还可以将 status: className
配对保留在组件 data/computed 内的对象中。语法将更改为 itemClass[item]
.
插槽允许您自定义下拉列表中的列表项。您甚至可以使用它来添加不同颜色的不同图标来表示项目状态。
如果您想在选择项目时自定义外观,可以为 selection
slot 创建一个类似的模板。
您可以根据 status
设置 selected
选项的样式,这是基本思路,但您肯定可以使其更具动态性。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
auto: [{value:1,text:"Option 1",status:"finished"},{value:2,text:"Option 2",status:"running"},{value:3,text:"Option 3",status:"scheduled"}],
selectedAuto: '',
}
},
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<v-autocomplete
v-model="selectedAuto"
:items="auto"
:item-status="auto.status"
>
<template slot="selection" slot-scope="data">
<!-- HTML that describe how select should render selected items -->
<v-list-item-action-text>
<span v-if="data.item.status == 'finished'" class="green--text">
{{ data.item.text }}
</span>
<span v-if="data.item.status == 'running'" class="red--text">
{{ data.item.text }}
</span>
<span v-if="data.item.status == 'scheduled'" class="blue--text">
{{ data.item.text }}
</span>
</v-list-item-action-text>
</template>
<template slot="item" slot-scope="data">
<!-- HTML that describe how select should render items when the select is open -->
<v-list-item-action-text>
{{ data.item.text }}
</v-list-item-action-text>
</template>
</v-autocomplete>
</v-app>
</div>