隐藏element的DateTimePicker组件自带的清空按钮

管理台页面使用到el-date-picker,type = datetimerange 但是组件自带了清空按钮,实际上这个控件业务上代表开始时间和结束时间是一个必填选项,所有想要把清空按钮隐藏掉。

查看了文档https://element.eleme.io/#/zh-CN/component/datetime-picker,没有属性和方法可以隐藏清空按钮所以,想到使用display:none属性修改样式来隐藏按钮。

  1. 利用el-date-picker的属性popper-class
  2. 通过定义新的类选择器设置样式display:none防止影响全局

    设置popper-class='noClear'

在全局样式定义noClear类选择器样式

css 复制代码
/*日期时间组件不显示 清空按钮*/
.noClear .el-picker-panel__footer .el-button.el-picker-panel__link-btn.el-button--text.el-button--mini {
	display: none ;
}

通过f12定位到清空按钮,查看class,新定义一个.noClear样式就好了

成功隐藏了

相关推荐
gongzemin11 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox24 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952728 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox