如何阻止Vuetify 3中v-select组件的自动滚动

在Vuetify 2中可通过:menu-props="auto"禁止v-select菜单自动滚动到选中项，但该配置在Vuetify 3中已失效。以下是两种可行的解决方法：

方法一：配置菜单滚动策略为none #

直接通过menu-props设置菜单的滚动策略，完全禁用自动滚动行为：

<template>
  <v-app>
    <v-container>
      <v-select 
        v-model="selected" 
        :items="items"
        :menu-props="{ scrollStrategy: 'none' }"
      />
    </v-container>
  </v-app>
</template>

<script setup>
import { reactive, ref } from 'vue'

const selected = ref('item10')
const items = reactive([
  'item1',
  'item2',
  'item3',
  'item4',
  'item5',
  'item6',
  'item7',
  'item8',
  'item9',
  'item10',
  'item11',
])
</script>

scrollStrategy: 'none'会让菜单展开时保持初始位置，不会自动滚动到选中项。

方法二：监听菜单展开事件，手动重置滚动位置 #

如果需要更灵活的控制，可以监听菜单打开事件，在DOM更新后手动调整滚动位置：

<template>
  <v-app>
    <v-container>
      <v-select 
        ref="selectRef"
        v-model="selected" 
        :items="items"
        @menu:open="resetMenuScroll"
      />
    </v-container>
  </v-app>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'

const selected = ref('item10')
const items = reactive([
  'item1',
  'item2',
  'item3',
  'item4',
  'item5',
  'item6',
  'item7',
  'item8',
  'item9',
  'item10',
  'item11',
])
const selectRef = ref(null)

const resetMenuScroll = async () => {
  await nextTick()
  const menuElement = selectRef.value?.menu?.$el
  if (menuElement) {
    menuElement.scrollTop = 0
  }
}
</script>

说明 #

Vuetify 3的组件结构与Vuetify 2不同，原有的this.$refs.selector.$refs.menu方式已无法获取菜单元素。现在需要通过组件实例的menu属性访问菜单实例，再获取其对应的DOM元素进行滚动控制。

内容的提问来源于stack exchange，提问作者emreseyit