1. 问题
在使用DateTimePicker 日期时间选择器控件时,有些场景下需要设置数据不可清理,按照常规操作直接设置属性 clearable 的值为false
即可,但是发现下拉框中仍有按钮“清空”,这就跟我们的业务需求冲突了。
2. 思考
纵观element UI相关文档以及 Attributes参数,我们没有找到其它字段或者方法设置隐藏该“清空”按钮。另外看到一个有意思的现象,即疑似官方在某个地方也遇到这个缺陷了哈哈。
想来想去,这里按钮也并不是很多,而且时间控件也提供了popper-class
给下拉面板设置样式,也许我们就可以利用起来。
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
popper-class | DateTimePicker 下拉框的类名 | string | — | — |
3. 解决方案
-
- 我们在控件上设置 popper-class, 比如值为
hide-clearall
。
- 我们在控件上设置 popper-class, 比如值为
-
- 在全局样式中设置隐藏“清空”按钮的样式,注意不要影响到其它按钮样式。
.hide-clearall .el-picker-panel__footer .el-button--text{display: none;
}
注意:设置该样式一定不能影响其它按钮样式!!!