elementui 中 DateTimePicker 组件时间自定义格式化

在 Element UI 的 DateTimePicker 组件中，可以通过 format 属性来设置日期时间的显示格式。如果需要自定义格式化，可以使用 slot 来实现。

以下是一个自定义格式化日期时间的示例：

<template>
  <el-date-picker
    v-model="value"
    type="datetime"
    placeholder="选择日期时间"
    format="YYYY-MM-DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss">
    <template v-slot:default="scope">
      <span>{{ customFormat(scope.userInput) }}</span>
    </template>
  </el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      value: ''
    };
  },
  methods: {
    customFormat(value) {
      if (!value) return '';
      const date = new Date(value);
      // 自定义格式化日期时间
      return `${date.getFullYear()}-${this.padStart(date.getMonth() + 1)}-${this.padStart(date.getDate())} ${this.padStart(date.getHours())}:${this.padStart(date.getMinutes())}:${this.padStart(date.getSeconds())}`;
    },
    padStart(value) {
      return value.toString().padStart(2, '0');
    }
  }
};
</script>

在这个例子中，我们使用了 v-slot:default 来替换默认的输入框。在 customFormat 方法中，我们对日期时间进行了自定义的格式化，并使用 padStart 方法来保证单数字月份、日期、小时、分钟和秒钟前补零。这样用户看到的日期时间格式将是自定义的格式。