隐藏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样式就好了

成功隐藏了

相关推荐
Csvn1 小时前
前端架构设计:构建可维护的大型应用
前端
lichenyang4531 小时前
鸿蒙 ArkUI 走马灯卡片实战:从官方文档检索到 Swiper 实现
前端
喵个咪1 小时前
吃透后台权限系统:从架构设计到 Vue3/React 双框架完整落地
前端·vue.js·react.js
hdsoft_huge1 小时前
全开源数字孪生系统搭建方案:全套技术文档
vue.js·开源·node.js·echarts·webstorm
一起逃去看海吧1 小时前
对接LangSmith
java·前端·数据库
wyhwust1 小时前
web应用技术-第一次课后作业
java·前端·数据库
问心无愧05131 小时前
ctf show web入门257
android·前端·笔记
学且思1 小时前
Vue3 Patch 算法深度解析:从原理到源码实现
前端·vue.js
streaker3031 小时前
从复制 Token 到复用登录态:site-fetchkit 的抽离过程
前端·浏览器·ai编程
卤蛋fg61 小时前
vxe-table 导出 XLSX 文件:自动展开分组并导出图片
vue.js