问题描述: 想隐藏时间选择器中的此刻按钮,在<style scoped></style>
中使用/deep/
或::v-deep
进行样式修改不生效
方法一: 是网上大部分的回答,在全局样式中修改,或者去掉scoped全局修改;项目中全局样式修改的方式,其实并不推荐!
.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn { display: none; }
方法二:利用时间选择器的focus事件,在点击的时候去获取相应dom并设置样式
focus() {
this.$nextTick(() => {
document.getElementsByClassName('el-button--text')[0].setAttribute('style', 'display:none') // 隐藏此刻按钮
}
问题描述: 日期选择器中选择时间时,想只选择小时,但显示时又要显示“小时:分钟”,所以单纯的设置format是无法达到效果的
解决方法:format和value-format设置为"yyyy-MM-dd HH:mm",再利用在focus事件时操作dom去设置样式
<el-date-picker
v-model="refreshForm.date"
popper-class="pick-time"
format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm"
type="datetime"
:picker-options="{
disabledDate: (time)=>{
return showToday ? time.getTime() > Date.now() - 8.64e6 : time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
},
selectableRange: startTimeRange
}"
@focus="focus"
>
</el-date-picker>
focus(){
// 设置时间选择器中样式
this.$nextTick(() => {
document.getElementsByClassName('el-time-spinner__wrapper')[0].setAttribute('style', 'width:100%') // 小时列居中
document.getElementsByClassName('el-time-spinner__wrapper')[1].setAttribute('style', 'display:none') // 隐藏分列
})
}