解决element DateTimePicker+vue弹出框只显示小时

作者：云间搭桥

时间：2026-10-24

本文介绍如何在Vue项目中解决Element UI DateTimePicker组件弹出框仅显示小时的问题。通过结合CSS后代选择器与Vue深度选择器，利用popper-class指定类名，在全局样式中精准控制弹出框DOM结构，避免全局污染。

文章目录

本文涉及三个核心知识点：

1. CSS 后代选择器的使用

https://www.w3school.com.cn/css/css_selector_descendant.asp

2. Vue 深度选择器的机制

https://vue-loader.vuejs.org/zh/guide/scoped-css.html

3. Element UI DateTimePicker 组件中 popper-class 属性的应用

https://element.eleme.cn/#/zh-CN/component/datetime-picker

在掌握上述三个知识点的基础上，可以在 Vue 页面的全局样式（即未添加 scoped 标记的 style 标签）中，利用 CSS 后代选择器配合 Vue 深度选择器来锁定并修改 Element UI 组件内部的样式。通过外层样式类名约束组件内部结构，可以确保样式修改仅作用于目标组件，而不会污染全局其他 Element UI 组件。

然而，DateTimePicker 组件具有特殊性，其弹出框的 DOM 节点并不隶属于当前 Vue 文件中的任何标签，因此无法直接通过常规的 CSS 后代选择器加 Vue 深度选择器来锁定并自定义其弹出框样式。查阅 DateTimePicker 官方文档后发现，可以通过 popper-class 属性为下拉弹出框指定一个自定义类名。利用这个指定的类名结合 Vue 深度选择器，即可在全局样式中唯一地重写特定 DateTimePicker 组件的弹出框部分，从而解决只显示小时的问题。


<template>
 <div class="app-container ">
 
     <el-date-picker
      v-model="..."
      type="datetimerange"
      align="right"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      format="yyyy-MM-dd HH"
      value-format="yyyy-MM-dd HH"
      popper-class="tpc"
     ></el-date-picker>
 
  </div>
</template>
<style lang="scss" scoped>
...
</style>
 
<style>
.tpc /deep/ .el-time-spinner__wrapper {
 width:100% !important;
}
.tpc /deep/ .el-scrollbar:nth-of-type(2) {
 display: none !important;
}
</style>

至此，关于解决 Element DateTimePicker 在 Vue 中弹出框只显示小时的问题介绍完毕。如需了解更多 Element DateTimePicker 弹出框相关内容，请搜索本站历史文章或继续浏览后续相关文章，感谢大家的支持！