关于el-date-picker组件,如何隐藏时间组件底部清空按钮

工作中可能会遇到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;
  }

最后实现
如下是隐藏前和隐藏后:

如果你觉得有用 请 点赞 + 收藏 !!!

相关推荐
小桥风满袖4 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang4 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户73087011793084 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
前端人类学4 小时前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise
李重楼4 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu4 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin4 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者4 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
CryptoRzz5 小时前
印度尼西亚股票数据API对接实现
javascript·后端
brzhang5 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构