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

此文谨献给奋斗在一线的程序员朋友们,若能为你们解决问题是我的荣耀！

三个知识点：

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

但是DateTimePicker比较特殊，弹出框的dom不隶属于当前的vue文件内的任何标签，所以无法在当前页用css 后代选择器+vue深度选择器锁定要自定义样式的DateTimePicker的弹出框部分。通过查阅DateTimePicker的官方文档发现可以使用popper-class来指定下拉框类名。这样就可以使用这个指定的类名+css 后代选择器在全局样式中唯一重写某个需要自定的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 
      .el-time-spinner__wrapper {
     
    
   

    

     

    
    

     
  
      width:
      100% 
      !important;
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      .tpc 
      .el-scrollbar
      :nth-of-type(2) {
     
    
   

    

     

    
    

     
  
      display: none 
      !important;
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </style>
     
    
  

此文谨献给奋斗在一线的程序员朋友们,,若能为你们解决问题是我的荣耀！