el-datepicker选中日期后重新聚焦且关闭日历弹窗的方案问询

开发者阿泽

2026-9-28

针对el-datepicker回车触发搜索的可行解决方案

方案1：将回车事件绑定到表单容器（无侵入、兼容性最好，最推荐）

不需要强制回焦el-datepicker，直接把回车事件绑定在整个表单元素上，只要用户在表单作用域内按下回车就触发搜索，完全避开el-datepicker的焦点和弹窗冲突问题。
代码示例：

<el-form @keydown.enter.prevent="handleSearch">
  <el-date-picker v-model="date" type="date" placeholder="选择日期" />
  <!-- 其他表单项 -->
  <el-button type="primary" @click="handleSearch">搜索</el-button>
</el-form>

.prevent修饰符会阻止浏览器默认的表单提交行为，避免页面意外刷新。

方案2：选中日期后先关闭弹窗再执行回焦

如果业务要求必须保持el-datepicker的焦点状态，可在日期选中的change回调中先调用组件内置的关闭弹窗方法，等DOM更新完成后再执行聚焦操作，避免弹窗残留。
代码示例：

<el-date-picker
  ref="datePicker"
  v-model="date"
  type="date"
  placeholder="选择日期"
  @change="handleDateChange"
/>

逻辑代码：

methods: {
  async handleDateChange() {
    // 手动调用组件内置方法关闭日期弹窗
    this.$refs.datePicker.hidePicker()
    // 等待DOM更新完成后再执行聚焦
    await this.$nextTick()
    this.$refs.datePicker.focus()
  },
  handleSearch() {
    // 业务搜索逻辑
  }
}

Element Plus用户可通过v-model:visible主动控制弹窗显示状态，将visible设为false后再执行聚焦即可，逻辑完全一致。