将自定义数据属性添加到 Vuetify v-select 选项

Posted

技术标签:

【中文标题】将自定义数据属性添加到 Vuetify v-select 选项【英文标题】:Add custom data attribute to Vuetify v-select options 【发布时间】:2021-12-21 09:37:48 【问题描述】:

我正在使用 v-autocomplete 组件来列出选择器中的项目。由于 v-autocomplete 只是一个高级 v-select,我认为 v-select 的答案也适用于 v-autocomplete。

在我的列表中,我有不同状态的项目,应该以某种方式进行标记。所以我想根据项目属性向选项添加一个数据属性。如果我可以添加至少一个不同的类,那也会有所帮助。但是由于我没有任何选项元素可以添加这些属性,所以我找不到方法。

我的物品看起来像:

value:1,text:"Option 1",status:"finished",value:2,text:"Option 2",status:"running",value:3,text:"Option 3",status:"scheduled"

这个想法是根据它们的状态以不同的方式为选择中的选项设置样式。所以我想实现这样的目标:

<v-autocomplete
    v-model="selectedItem"
    :items="items"
    :item-status="item.status">
</v-autocomplete>

这可能吗?

【问题讨论】:

【参考方案1】:

您可以根据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>

【讨论】:

【参考方案2】:

听起来您需要使用可用于 v-autocomplete 元素的 item slot。

<template v-slot:item=" item ">
  <div :class="getItemClass(item)">
     item.text 
  </div>
</template>

除了使用getItemClass(item) 方法,您还可以将status: className 配对保留在组件数据/计算中的对象中。语法将更改为itemClass[item]

该插槽允许您自定义下拉列表中的列表项。您甚至可以使用它添加不同颜色的不同图标来表示项目状态。

如果您希望在选择项目时具有自定义外观,您可以为 selection slot 创建一个类似的模板。

【讨论】:

我不知道这些插槽到底在做什么,也找不到这样的例子。这正是我一直在寻找的。这样我还可以将:data-status="item.status" 添加到 div 中,并且效果很好。非常感谢!

以上是关于将自定义数据属性添加到 Vuetify v-select 选项的主要内容,如果未能解决你的问题,请参考以下文章

如何将自定义属性添加到 Symfony Doctrine YAML 映射文件

将自定义样式属性添加到 MXML 自定义组件

将自定义 HTML 属性添加到 Grav 生成表单的按钮

将自定义属性添加到 asp.net-mvc 中的页面指令

xml Magento - 使用if语句将自定义属性添加到产品网格

将自定义 JsonConverter 添加到 Web API 会影响传递给自定义验证属性的字符串值