Vuetify中的滚动列表

Question

这是我使用清单的Vuetify代码：

<v-list>
    <v-list-tile
            v-for="user in users"
            :key="user.id"
            avatar
            @click=""
    >

        <v-list-tile-content>
            <v-list-tile-title v-text="user.name"></v-list-tile-title>
        </v-list-tile-content>

        <v-btn icon>
            <v-icon>edit</v-icon>
        </v-btn>
    </v-list-tile>
</v-list>

问题是，我有100多个用户，默认情况下该列表不可滚动。有什么特征可以帮助吗？

Answer 1

作为记录，您实际上根本不需要使用style属性，您可以使用overflow-y-auto类和max-height道具来实现：

<v-list class="overflow-y-auto" max-height="400">

Vue 2.6.10，Vuetify 2.0.0

Answer 2

我通过提供样式max-height: 100px和添加vuetify类scroll-y来实现这一点<v-list></v-list>

例如：

<v-list
       style="max-height: 100px"
       class="scroll-y"
>
    <template 
             v-for="user in users"
    >
        <v-list-tile
                    :key="user.id"
                    avatar
                    @click=""
        >
            <v-list-tile-content>
                <v-list-tile-title v-text="user.name"></v-list-tile-title>
            </v-list-tile-content>
            <v-btn icon>
                <v-icon>edit</v-icon>
            </v-btn>
        </v-list-tile>        
    </template>    
</v-list>

Answer 3

对于vuetify 2.0，帮助程序类'scroll-y'更改为'overflow-y-auto'。 https://github.com/vuetifyjs/vuetify/releases（只需Ctrl + F'scroll-y'）因此使用。

<v-list style="max-height: 100px"class="overflow-y-auto">