vue2版本elementUI的clearable属性和DateTimePicker 下拉框的清空功能冲突

ops/2024/12/27 7:33:12/

1. 问题

在使用DateTimePicker 日期时间选择器控件时,有些场景下需要设置数据不可清理,按照常规操作直接设置属性 clearable 的值为false即可,但是发现下拉框中仍有按钮“清空”,这就跟我们的业务需求冲突了。
在这里插入图片描述

2. 思考

纵观element UI相关文档以及 Attributes参数,我们没有找到其它字段或者方法设置隐藏该“清空”按钮。另外看到一个有意思的现象,即疑似官方在某个地方也遇到这个缺陷了哈哈。
在这里插入图片描述
想来想去,这里按钮也并不是很多,而且时间控件也提供了popper-class给下拉面板设置样式,也许我们就可以利用起来。

参数说明类型可选值默认值
popper-classDateTimePicker 下拉框的类名string

3. 解决方案

    1. 我们在控件上设置 popper-class, 比如值为 hide-clearall
    1. 在全局样式中设置隐藏“清空”按钮的样式,注意不要影响到其它按钮样式。
.hide-clearall .el-picker-panel__footer .el-button--text{display: none;
}

注意:设置该样式一定不能影响其它按钮样式!!!


http://www.ppmy.cn/ops/144788.html

相关文章

STM32 高级 谈一下IPV4/默认网关/子网掩码/DNS服务器/MAC

首先可以通过 winr->输入cmd->输入ipconfig 命令可以查看计算机的各种地址 IPV4:是互联网协议第 4 版(Internet Protocol version 4)所使用的地址。它是一个 32 位的二进制数字,通常被分为 4 个 8 位的部分&#xff…

数据结构与算法学习笔记----匈牙利算法

数据结构与算法学习笔记----匈牙利算法 author: 明月清了个风 first publish time: 2024.12.22 ps⛹️‍♀️这题的算法思路在题目中,没有写在题目前面,注释十分详细 Acwing 861. 二分图的最大匹配 [原题链接](861. 二分图的最大匹配 - AcWing题库) …

谷歌浏览器的网络安全检测工具介绍

作为全球最受欢迎的浏览器之一,谷歌浏览器不仅提供了快速、便捷的浏览体验,还内置了一系列强大的网络安全检测工具,帮助用户识别潜在的网络威胁,保护个人隐私和数据安全。本文将详细介绍谷歌浏览器中的几项关键网络安全检测功能&a…

【python高级】342-TCP服务器开发流程

CS模式:客户端-服务端模式 TCP客户端开发流程介绍(五步)(C端) 1.创建客户端套接字对象 2.和服务端套接字建立连接 3.发送数据 4.接收数据 5.关闭客户端套接字 TCP服务端开发流程(七步)&#xf…

小程序app封装公用顶部筛选区uv-drop-down

参考ui:DropDown 下拉筛选 | 我的资料管理-uv-ui 是全面兼容vue32、nvue、app、h5、小程序等多端的uni-app生态框架 样式示例&#xff1a; 封装公用文件代码 dropDownTemplete <template><!-- 顶部下拉筛选区封装公用组件 --><view><uv-drop-down ref&…

CV-OCR经典论文解读|An Empirical Study of Scaling Law for OCR/OCR 缩放定律的实证研究

论文标题 An Empirical Study of Scaling Law for OCR OCR 缩放定律的实证研究 论文链接&#xff1a; An Empirical Study of Scaling Law for OCR论文下载 论文作者 Miao Rang, Zhenni Bi, Chuanjian Liu, Yunhe Wang, Kai Han 内容简介 本论文在光学字符识别&#xf…

python Redis 操作工具类封装

在 Python 中封装 Redis 操作工具类&#xff0c;可以方便地在应用程序中复用 Redis 操作&#xff0c;简化 Redis 操作的复杂度&#xff0c;并提供统一的接口。这里给出一个基本的 Redis 操作工具类封装&#xff0c;使用 redis-py 库&#xff0c;这个库是 Python 与 Redis 交互的…

Python 爱心代码实现动态爱心图案展示

引言 在 Python 中&#xff0c;我们可以利用 tkinter 库来创建有趣的图形界面&#xff0c;本文将为大家分享一段使用 tkinter 库绘制动态爱心图案的代码&#xff0c;并详细介绍其实现逻辑与运行方法。 一、代码功能概述 这段 Python 代码借助 tkinter 库创建了一个窗口&…