当前位置: 代码网 > it编程>编程语言>Javascript > el-date-picker组件隐藏时间组件底部清空按钮的操作步骤

el-date-picker组件隐藏时间组件底部清空按钮的操作步骤

2024年07月05日 Javascript 我要评论
工作中可能会遇到el-date-picker组件隐藏时间组件底部清空按钮分为两种 :如果你想要实现全部的el-date-picker的清空隐藏 和 某一个页面的el-date-picker的清空隐藏1

工作中可能会遇到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组件隐藏底部清空按钮内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com