Vue.js - 解决el-time-picker点击后会自动选择当前时间问题（禁止自动选中当前时间）
作者：hangge | 2025-02-06 10:38
1，问题描述
（1）我们使用 Element-UI 提供的 TimePicker 时间选择器 el-time-picker 可以实现时分秒时间的选择功能。如果该组件绑定值为空，初始化时一切正常。
（2）而当点击该组件时，该组件会自动选中当前时间，并将其绑定值设置为该时间。有时我们并不需要这个功能，而是希望由用户自行选择时间。
2，解决办法
（1）我们可以将 el-time-picker 组件的 default-value 设置成时分秒为 00:00:00 的自定义值。
提示： default-value 时分秒为 00:00:00 不会改变组件绑定的值，但如果是其他值，比如 00:00:01。点击组件后会自动选中这个 default-value，并且改变绑定值。
<template>
<div>
<diV>{{ time }}</diV>
<br><br>
<el-time-picker
v-model="time"
:default-value="defaultTime"
placeholder="请选择时间"
></el-time-picker>
</div>
</template>
<script>
export default {
data() {
return {
time: null,
};
},
computed: {
defaultTime() {
const now = new Date();
return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
},
}
};
</script>
（2）运行程序，可以看到点击组件弹出时间选择框时不会再自动选中当前时间了。
全部评论（0）