VUE3+elementUI 日期时间组件筛选时区分区间 el-date-picker

之前遇到个需求，老板想要只选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标签中