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 个用户，并且默认情况下列表不可滚动。有什么特性可以帮助它吗？

原文由 Tutu Kaeen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我通过给出 max-height: 100px 的样式并将 vuetify 类 overflow-y-auto 添加到 <v-list></v-list> --- 来实现这一点

例如：

 <v-list
       style="max-height: 100px"
       class="overflow-y-auto"
>
    <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>

原文由 Sagar Samal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于 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">

原文由 Baldeep Singh Kwatra 发布，翻译遵循 CC BY-SA 4.0 许可协议