时间控件el-date-picker隐藏分钟

需求是选择日期后选择时间只精确到小时设置format="yyyy-MM-dd HH" 后依旧会显示后面的分钟

image.png

<style lang="scss"> 这样设置有效 但是污染全局
.el-time-spinner__wrapper {
  width: 100% !important;
}

.el-scrollbar:nth-of-type(2) {
  display: none;
}
</style>
<style lang="scss" scoped> //加个deep样式穿透后发现失效了
::v-deep .el-time-spinner__wrapper {
  width: 100% !important;
}

::v-deep .el-scrollbar:nth-of-type(2) {
  display: none;
}
</style>

image.png

查阅发现DateTimePicker是将元素直接挂载到页面的body的。那样式穿透是元素直接添加的body中，没有前置类。所以不生效
后面发现element官方文档中可以使用popper-class来指定DateTimePicker的类名

image.png

完整代码
<el-date-picker
        popper-class="noneMinute"
        format="yyyy-MM-dd HH"
        value-format="yyyy-MM-dd HH"
        v-model="searchTimeValue"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="timeChange()"
        :key="dateKey"
      > </el-date-picker>

这里style里面别用scoped
<style lang='scss'>
.noneMinute {
  .el-time-spinner__wrapper{
    width: 100% !important;
  }
  .el-scrollbar:nth-of-type(2){
    display: none;
  }
}
</style>

效果图

image.png