英文:
v-select set number of items shown in dropdown Vuetify
问题
我有以下的 v-select：
它有 7 个选项（每个工作日一个），但我希望在打开时显示所有 7 个，而不仅仅是前 6 个带有滚动条。我似乎找不到 v-select 的 API 选项来实现这个。
我在 Vuetify 页面和一些 StackOverflow 问题上进行了搜索。
我该如何做，如果我漏掉了什么：我应该搜索什么？
谢谢！
英文:
I have the following v-select:
It has 7 items (for each weekday) but I want it to show all 7 when it's opened, not only the first 6 with a scrollbar. I can't seem to find an v-select API option for that.
I searched on the Vuetify page and on several StackOverflow questions.
How can I do that and if I missed something: What should I have been searching for?
Thanks!
答案1
得分: 1
你可以取消设置max-height，这样对话框就不会受到限制。
这是v-menu的底层属性，你可以使用:menu-props来传递它：
<v-select
:menu-props="{maxHeight: 'unset'}"
...
这里有一个片段（你需要展开它以查看完整的高度）：
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
const {
createApp,
ref
} = Vue;
const {
createVuetify
} = Vuetify
createApp({}).use(createVuetify()).mount('#app')
<!-- language: lang-html -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.css" />
<div id="app">
<v-app>
<div>
<v-select
label="Weekday"
:items="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
:menu-props="{maxHeight: 'unset'}"
></v-select>
</div>
</v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.js"></script>
<!-- end snippet -->
它应该在使用Vuetify的Vue 2版本上起作用，它的:menu-props文档记录得更详细。
这对你有用吗？
英文:
You can unset max-height, so that the dialog is not limited.
It's a property on the underlying v-menu, you pass it using :menu-props:
<v-select
:menu-props="{maxHeight: 'unset'}"
...
Here is a snippet (you need to expand it to see it in full height though):
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
const {
createApp,
ref
} = Vue;
const {
createVuetify
} = Vuetify
createApp({}).use(createVuetify()).mount('#app')
<!-- language: lang-html -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.css" />
<div id="app">
<v-app>
<div>
<v-select
label="Weekday"
:items="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
:menu-props="{maxHeight: 'unset'}"
></v-select>
</div>
</v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.js"></script>
<!-- end snippet -->
It should work the same using Vuetify for Vue 2, its :menu-props is actually documented a bit better.
Does that work for you?
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论