之前遇到个需求,老板想要只选0-10点,且分钟区只要0和30,于是就有了以下代码
<el-date-picker
v-model="ruleForm.time"
type="datetime"
placeholder="必选"
format="YYYY/MM/DD hh:mm"
value-format="x"
:disabled-Minutes="disabledMin"
:disabled-hours="disabledHours"
/>
使用【disabled-Minutes】和【disabled-hours】禁用分区,让其不能选择
const disabledHours = () => {
return makeRange(11, 24);
};
const disabledMin = () => {
return makeRange(1, 29).concat(makeRange(31, 59));
};
但是会发现,禁用的分区还是显示出来了,这样并不能提升操作效率
打开控制台,发现被禁用的都带有.is-disabled的class属性
于是我们在css中加上让其不显示的规则
.el-date-picker__time-header {
.el-date-picker__editor-wrap {
.el-time-panel {
ul.el-scrollbar__view.el-time-spinner__list {
li.el-time-spinner__item.is-disabled {
display: none;
height: 0 !important;
// 或者
// color: transparent !important;
// position: absolute !important;
// left: 200% !important;
}
}
}
}
}
!注意不要放到带scoped的style标签中