代码之家 › 专栏 › 技术社区 › wondra

Veutilify自动完成隐藏禁用项目

vuetify.js vuejs2 vue.js css html

wondra · 技术社区 · 4 年前

我禁用了vuetify中的一些项目 <v-autocomplete> 使用道具 item-disabled ,自然这些项目仍会出现在下拉列表中。对于这个特殊的例子,我怎么能, 隐藏那些东西也是吗?

类似的自动完成会出现在应用程序中,但并非所有的自动完成都应该以类似的方式运行,在某些情况下,应该显示禁用的项目,而在其他情况下则不显示。正因为如此,我继续为残疾项目添加了类。然而,这似乎没有被应用,隐藏项仍然出现在列表中(可能是由于vuetify实现下拉菜单的方式):

<v-autocomplete 
   v-model="selectedItem"
   class="list-hide-disabled"
   :items="items"
   :item-disabled="isItemDisabled">
</v-autocomplete>

::v-deep .list-hide-disabled .v-list-item.v-list-item--disabled {
    display: none;
}

isItemDisabled(item: ListItemModel): boolean {
   return item.isDeleted;
}

过滤 :items 似乎不适用,因为它还将隐藏以前的选择,在禁用之前选择的项目仍应呈现。这个 v-slot:item 也似乎没有用,因为即使内容被隐藏,它也会在“隐藏”项目的位置保留空框。

0 回复 | 直到 4 年前

TymoteuszLao 4 年前

使用班您必须覆盖的项目槽 v-自动完成 并将您的类应用于具有 is已删除 所有物

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      selectedItem: null,
      items: [{
        text: 'A',
        isDeleted: false
      }, {
        text: 'B',
        isDeleted: true
      }]
    }
  },
});

.list-hide-disabled {
  display: none !important
}

<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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-autocomplete v-model="selectedItem" :items="items" item-disabled="isDeleted">
      <template #item="{item, on, attrs}">
      <v-list-item v-bind="attrs" v-on="on" :class="{'list-hide-disabled': item.isDeleted}">{{item.text}}</v-list-item>
    </template>
    </v-autocomplete>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

4 年前

Park · Vuejs道具,路径较长

4 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

4 年前

roev · 大堆来自(物体)。forEach不使用vue。js

4 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

8 年前

Ready Dev · Axios一次发出多个请求(vue.js)

8 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

8 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

8 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

8 年前

Tim · VueJS-迭代从AJAX调用返回的数据

8 年前