v-select下拉弹出项遮挡input框

项目场景：

使用vuetify的v-select的时候，下拉弹出的框遮挡问题，默认就是那么设计的，但是若有需求更改，不让遮挡，也是可以更改的，具体操作如下：

问题描述：

官网原本就是这样：


代码：

<template>
  <div>
	   <v-row class="d-flex justify-center" >
	          <v-col
	          class="d-flex"
	          cols="12"
	          sm="6"
	        >
	          <v-select
	            :items="items"
	            label="Solo field"
	            solo
	          ></v-select>
	        </v-col>
	      </v-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
   		 items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
    };
  },
};
</script>

解决方案：

不遮挡的效果图：

添加属性：

menu-props 属性

• 类型：string | array | object
  代码：

<template>
  <div>
	   <v-row class="d-flex justify-center" >
          <v-col
          class="d-flex"
          cols="12"
          sm="6"
        >
          <v-select
            :items="items"
            label="Solo field"
            :menu-props="{ bottom: true, offsetY: true }"  
            solo
          ></v-select>
        </v-col>
      </v-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
   		 items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
    };
  },
};
</script>

---

浅浅分享一下，希望对大家有帮助~