Resolve the element DateTimePicker+vue pop up box to display only hours

Three knowledge points:

1. css progeny selector

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

2. vue depth selector

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

3. element ui DateTimePicker Specifies the drop-down box class name popper-class

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

On the premise of clarifying the above three knowledge points, in the global style of vue page (i.e., in style tag without scoped tag), the style in element ui component to be controlled can be locked by using css descendant selector + vue depth selector, and the internal style of element ui component to be controlled is constrained by the outer style class name, so all element ui components in the whole world will not be polluted.

However, DateTimePicker is special, and dom of pop-up box does not belong to any tags in the current vue file, so it is impossible to lock the pop-up box part of DateTimePicker with css descendant selector + vue depth selector to customize the style on the current page. A review of the official DateTimePicker documentation shows that you can use popper-class to specify the drop-down box class name. This allows you to use the specified class name + vue depth selector to override a custom DateTimePicker pop-up section in the global style only 1.

<template>
 <div class="app-container ">
 
     <el-date-picker
      v-model="..."
      type="datetimerange"
      align="right"
      range-separator=" To "
      start-placeholder=" Start time "
      end-placeholder=" End time "
      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>