脚本宝典收集整理的这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

三个知识点：

1.css 后代选择器

@L_512_0@

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组件内部的样式，所以不会造成全局所有element ui组件被污染的情况。

但是DateTimePicker比较特殊，弹出框的dom不隶属于当前的vue文件内的任何标签，所以无法在当前页用css 后代选择器+vue深度选择器锁定要自定义样式的DateTimePicker的弹出框部分。通过查阅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弹出框内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！ 

脚本宝典总结

以上是脚本宝典为你收集整理的解决element DateTimePicker+vue弹出框只显示小时全部内容，希望文章能够帮你解决解决element DateTimePicker+vue弹出框只显示小时所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。