降低v-select vuetify3中的列表高度。

huangapple go评论56阅读模式
英文:

How to decrease list height in v-select vuetify3

问题

I can't decrease list height... list height becomes full screen height

<img src="https://i.stack.imgur.com/Y8rew.png" height="400">

I tried a lot of ways, but nothing happened

英文:

I can't decrease list height... list height becomes full screen height

<img src="https://i.stack.imgur.com/Y8rew.png" height="400">

I tried a lot of ways, but nothing happened

答案1

得分: 0

以下是您要翻译的内容:

"That is weird, as per default, the (max-)height is set to 310px (see source).

But you can change the height by passing a configuration object to the underlying v-menu through the :menu-props prop. You have to adjust the :max-height:

<v-select
  :menu-props="{
    'max-height': 310
   }"
/>
英文:

That is weird, as per default, the (max-)height is set to 310px (see source).

But you can change the height by passing a configuration object to the underlying v-menu through the :menu-props prop. You have to adjust the :max-height:

&lt;v-select
  :menu-props=&quot;{
    &#39;max-height&#39;: 310
   }&quot;
/&gt;

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-js -->

const { createApp, ref, computed} = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    const items = Array.from({length: 100}, (_,i) =&gt; `Options ${i+1}`)
    const maxHeightNumber = ref(0)
    const maxHeight = computed(() =&gt; maxHeightNumber.value  &gt; 0 ? maxHeightNumber.value + &#39;px&#39; : &#39;auto&#39;)
    
    return { items, maxHeight, maxHeightNumber}
  }

}
createApp(app).use(vuetify).mount(&#39;#app&#39;)

<!-- language: lang-html -->

&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.css&quot; /&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;div id=&quot;app&quot;&gt;
  &lt;v-app&gt;
    &lt;v-main&gt;
      &lt;div&gt;
      &lt;v-select
        :items=&quot;items&quot;
        label=&quot;Options Options Options&quot;
        :menu-props=&quot;{
          &#39;max-height&#39;: maxHeight
        }&quot;
      /&gt;
      &lt;/div&gt;&lt;div&gt;
      &lt;v-text-field :label=&quot;&#39;max height (&#39; + maxHeight + &#39;)&#39;&quot; type=&quot;number&quot; step=&quot;100&quot; v-model=&quot;maxHeightNumber&quot;&gt;&lt;/v-text-field&gt;
      &lt;/div&gt;
    &lt;/v-main&gt;
  &lt;/v-app&gt;
&lt;/div&gt;
&lt;script src=&quot;https://unpkg.com/vue@3/dist/vue.global.prod.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月17日 21:24:19
  • 转载请务必保留本文链接:https://go.coder-hub.com/76035663.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定