自定义 v-select 下拉位置答案

【问题标题】：Customize v-select dropdown position自定义 v-select 下拉位置
【发布时间】：2020-06-30 16:42:54
【问题描述】：

我正在使用 vuetify v-select 组件。我面临的问题不是向下打开下拉菜单，而是希望它向上打开，因为下拉菜单位于页面底部，因此某些下拉项目不会出现。如下图所示，Nunavut 有多个选项没有出现。请帮我解决这个问题。

<v-layout row wrap>
 <v-flex md6 xs12>
  <v-select
   :items="states"
   :closeOnSelect="true"
   multiple
   attach
   item-text='name'
   item-value='id'
  ></v-select>
 </v-flex>
</v-layout>

【问题讨论】：

你能把页面做大吗，在v-layout中添加mr-8类

标签： css vue.js vuetify.js

【解决方案1】：

你可以使用menu-props见docs

<v-select
 :items="states"
 :closeOnSelect="true"
 multiple
 attach
 :menu-props="{ top: true, offsetY: true }"
 item-text='name'
 item-value='id'
></v-select>

【讨论】：

它没有用。不用找了。仍然以相同的方式打开。我不认为 v-select 支持 menu-props
应该的，你有什么版本的vuetify？
vuetify 版本 1.0.5
可以升级到新版本吗？
不，我不能。我的很多代码都依赖于这个版本。

【解决方案2】：

这就是我通过添加 auto

解决此问题的方法

<v-layout row wrap>
 <v-flex md6 xs12>
  <v-select
   :items="states"
   :closeOnSelect="true"
   multiple
   attach
   item-text='name'
   item-value='id'
   auto
  ></v-select>
 </v-flex>
</v-layout>

【讨论】：

【解决方案3】：

另一种方法是将 menu-props 设置为 auto：

<v-select
     :items="states"
     :closeOnSelect="true"
     multiple
     attach
     :menu-props="auto"
     item-text='name'
     item-value='id'
    ></v-select>

【讨论】：