Vue年份下拉框问题：点击时定位到指定选项（1960）

核心方案 #

利用DOM的scrollIntoView方法，在下拉框点击时定位到目标年份（如1960）的选项，同时不干扰v-model的正常绑定。

实现代码 #

模板部分

<select v-model="dobYear" ref="yearSelect" @click="scrollToTargetYear">
  <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
</select>

脚本部分

export default {
  data() {
    return {
      dobYear: null, // 保持初始值为null或用户实际需要的默认选中值
      startYear: 1900,
      endYear: 2022,
      targetScrollYear: 1960 // 要定位的中间年份
    };
  },
  computed: {
    years() {
      const yearList = [];
      for (let year = this.startYear; year <= this.endYear; year++) {
        yearList.push(year);
      }
      return yearList;
    }
  },
  methods: {
    scrollToTargetYear() {
      // 等待DOM更新完成再操作
      this.$nextTick(() => {
        const selectElement = this.$refs.yearSelect;
        let targetOption;
        
        // 如果用户已经选中了年份，滚动到选中项；否则滚动到目标中间年份
        if (this.dobYear) {
          targetOption = selectElement.querySelector(`option[value="${this.dobYear}"]`);
        } else {
          targetOption = selectElement.querySelector(`option[value="${this.targetScrollYear}"]`);
        }

        if (targetOption) {
          // 让目标选项滚动到下拉列表的中间位置
          targetOption.scrollIntoView({ block: 'center', behavior: 'auto' });
        }
      });
    }
  }
};

为什么之前的方法无效 #

• <option selected>：只会将该选项设为默认选中值，并非控制下拉列表的滚动定位。
• 初始化v-model为1960：会让1960成为默认选中项，但点击下拉时的滚动逻辑仍由浏览器默认行为决定，无法达到只滚动不选中的效果。
• 点击事件直接赋值this.dobYear=1960：强制固定了v-model的值，导致用户无法选择其他年份。

注意点 #

• 如果不需要保留用户选中项的滚动位置，可直接移除判断逻辑，每次点击都滚动到目标年份。
• scrollIntoView的block参数可设置为'start'（顶部）、'center'（中间）、'end'（底部），根据需求调整。

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