隐藏element-ui中日期组件的【清空】按钮

982 阅读1分钟

现有需求某个页面的日期控件不允许用户清空时间

:clearable="false"只能干掉输入框中的清空按钮【图一】,但点开后里面还有个【清空】按钮【图二】

图一:

image.png

图二:

image.png

查阅了element-ui官方文档,里面并无相关配置。但可使用css强行隐藏,但要注意,style里不能用scoped

// a.vue:
<el-date-picker
    ...
    class="abc" // 这里加class会应用在图一的组件那里,而打开的面板并不在当前页面下,见图三的html位置
    :clearable="false"
    popper-class="no-clear"
/>

<style lang="less">
.no-clear {
    .el-picker-panel__footer .el-picker-panel__link-btn.el-button--text {
        display: none;
    }
}
</style>
图三:

image.png