记录--使用el-time-picker默认值遇到的问题

问题描述

在使用element-ui中的el-time-picker组件时，如果要设置默认值，可以通过v-model绑定一个时间对象来完成。例如：

<template>
  <el-time-picker v-model="defaultTime"></el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      defaultTime: new Date(2022, 0, 1, 12, 0, 0) // 设置为2022年1月1日12点
    };
  }
};
</script>

但是，如果我们希望只设置时间部分的默认值，例如设置为12点，则可以通过设置picker-options的format属性来完成。例如：

<template>
  <el-time-picker
    v-model="defaultTime"
    :picker-options="{ format: 'HH:00' }"
  ></el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      defaultTime: new Date(2022, 0, 1, 12, 0, 0) // 设置为2022年1月1日12点
    };
  }
};
</script>

这个时候，时间的显示格式为小时数+冒号+分隔符。用户可以通过拖动或输入来修改时间，但是如果未做任何修改并直接点击确认按钮，则时间会重置为零点。本篇攻略记录了这个问题的解决办法。

解决方法

为了解决这个问题，我们需要利用change事件来监听页面变化。change事件会在时间改变时触发，并可以获取到新的时间值。我们可以在事件处理函数中判断时间是否发生了变化，如果没有，则重设为默认值。代码如下：

<template>
  <el-time-picker
    v-model="defaultTime"
    :picker-options="{ format: 'HH:00' }"
    @change="handleChange"
  ></el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      defaultTime: new Date(2022, 0, 1, 12, 0, 0) // 设置为2022年1月1日12点
    };
  },
  methods: {
    handleChange(newTime) {
      // 如果新的时间值与默认值相同，则重设为默认值
      if (newTime.getHours() === 12 && newTime.getMinutes() === 0) {
        this.defaultTime = new Date(2022, 0, 1, 12, 0, 0);
      }
    }
  }
};
</script>

这样，即使用户未修改时间直接确认，也能保留之前设置的默认值。

示例说明

示例1

假设我们需要设置el-time-picker的默认时间为13:00。代码如下：

<template>
  <el-time-picker
    v-model="defaultTime"
    :picker-options="{ format: 'HH:00' }"
    @change="handleChange"
  ></el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      defaultTime: new Date(2022, 0, 1, 13, 0, 0) // 设置为2022年1月1日13点
    };
  },
  methods: {
    handleChange(newTime) {
      // 如果新的时间值与默认值相同，则重设为默认值
      if (newTime.getHours() === 13 && newTime.getMinutes() === 0) {
        this.defaultTime = new Date(2022, 0, 1, 13, 0, 0);
      }
    }
  }
};
</script>

示例2

假设我们需要设置el-time-picker的默认时间为23:00。代码如下：

<template>
  <el-time-picker
    v-model="defaultTime"
    :picker-options="{ format: 'HH:00' }"
    @change="handleChange"
  ></el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      defaultTime: new Date(2022, 0, 1, 23, 0, 0) // 设置为2022年1月1日23点
    };
  },
  methods: {
    handleChange(newTime) {
      // 如果新的时间值与默认值相同，则重设为默认值
      if (newTime.getHours() === 23 && newTime.getMinutes() === 0) {
        this.defaultTime = new Date(2022, 0, 1, 23, 0, 0);
      }
    }
  }
};
</script>

以上是解决el-time-picker默认值问题的方法，希望对您有所帮助。