本文介绍如何在Vue Element UI中隐藏el-date-picker组件底部的清空按钮。提供两种实现方式：通过全局element-ui.scss文件统一隐藏所有日期选择器的清空按钮，或通过为特定组件添加popper-class属性并结合局部CSS规则实现单个页面的隐藏效果。
在实际开发中，有时需要隐藏 el-date-picker 组件底部的清空按钮。这通常分为两种场景：一是全局隐藏所有 el-date-picker 的清空按钮，二是仅隐藏特定页面中某个 el-date-picker 的清空按钮。
1 全局隐藏
步骤1：在 element-ui.scss 文件中添加如下代码：
.el-picker-panel__footer .el-picker-panel__link-btn.el-button--text {
display: none;
}2 局部隐藏
步骤1：在 el-date-picker 组件上添加 popper-class="date-clear" 属性。
<el-date-picker
v-model="dateRange"
popper-class="date-clear"
style="width: 360px"
type="datetimerange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
:clearable="false"
@change="handleDate"
/>官网有介绍的
步骤2：在 element-ui.scss 文件中添加如下代码：
.date-clear .el-picker-panel__footer .el-picker-panel__link-btn.el-button--text {
display: none !important;
}最后实现 如下是隐藏前和隐藏后：
到此这篇关于el-date-picker组件如何隐藏时间组件底部清空按钮的文章就介绍到这了,更多相关el-date-picker组件隐藏底部清空按钮内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！