需求是选择日期后选择时间 只精确到小时 设置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
