Vuetify v-select预选中值时下拉框无法自动滚动至选中项问题

问题描述 #

使用Vuetify的v-select下拉组件，选项为间隔15分钟的时间槽列表：['00:00','00:15', ..., '23:45']，组件通过v-model绑定到预定义数据startTime，预设值例如'12:00'。出现以下异常：

• 首次点击下拉框时，列表不会自动滚动到预选中的12:00位置，需手动滚动查找；
• 手动选择其他值（如13:00）后，再次点击下拉框，列表会自动滚动到当前选中值的位置。

原因分析 #

核心原因是组件初始化阶段，预设值的匹配逻辑与下拉列表的渲染时机不同步：组件首次渲染时，下拉列表的DOM可能还未完全生成，导致滚动定位的逻辑无法找到目标元素；而手动选择后，组件内部状态已完成更新，打开下拉框时能正确触发滚动定位。另外需要注意预设值格式是否与选项完全一致（比如若预设值是'12.00'而选项是'12:00'，格式不匹配会直接导致组件无法识别选中项）。

解决方案 #

方案1：监听下拉框打开事件触发滚动 #

利用v-select的@open事件，在下拉框展开时执行滚动定位逻辑：

<v-select
  ref="timeSelect"
  v-model="startTime"
  :items="timeSlots"
  @open="scrollToSelected"
></v-select>

methods: {
  scrollToSelected() {
    this.$nextTick(() => {
      // 等待DOM更新完成后查找元素
      const selectContent = this.$refs.timeSelect.$el.querySelector('.v-select__content');
      const activeItem = selectContent.querySelector('.v-list-item--active');
      if (activeItem) {
        // 将选中项滚动到列表可视区域中央
        activeItem.scrollIntoView({ block: 'center', behavior: 'smooth' });
      }
    });
  }
}

方案2：组件挂载后手动触发滚动 #

在组件mounted钩子中，等待DOM渲染完成后执行滚动定位：

mounted() {
  this.$nextTick(() => {
    const selectContent = this.$refs.timeSelect.$el.querySelector('.v-select__content');
    const activeItem = selectContent.querySelector('.v-list-item--active');
    if (activeItem) {
      activeItem.scrollIntoView({ block: 'center' });
    }
  });
}

同样需要给v-select添加ref="timeSelect"属性。

方案3：校验预设值与选项格式一致性 #

务必确保startTime的预设值格式和选项列表中的完全匹配，比如统一使用HH:mm格式（如'12:00'），避免出现'12.00'这类格式不匹配的情况，否则组件无法识别选中项，自然无法触发滚动定位。

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