位置: IT常识 - 正文

【VUE3】ElementUI--el-date-picker下拉控件样式修改(高亮显示设置)(vue3 element-plus)

编辑:rootadmin
【VUE3】ElementUI--el-date-picker下拉控件样式修改(高亮显示设置) ElementUI--el-date-picker下拉控件样式修改一些废话事发背景实现效果实现思路总结和完整代码参考资料一些废话默默做前端,分享一些自己在项目需求实现中遇到的奇妙问题(主要是网上搜索不到解决办法自己解决后的总结方法和解决办法但不全面,自己整理总结的存档)。事发背景ElementUI的日期选择器有默认样式,即给默认接收或者当前的年、月、日加入高亮显示。但这次在项目实现后需求验收后要求把选中后的年、月、日变成高亮显示,默认的高亮移除。

推荐整理分享【VUE3】ElementUI--el-date-picker下拉控件样式修改(高亮显示设置)(vue3 element-plus),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elementui+vue,vue3.0 element ui,vue3.0 element ui,vue3.0 element,vue3+element,element ui vue 3,vue3.0 element ui,vue3+element,内容如对您有帮助,希望把文章链接给更多的朋友!

可以看到在截图中这个日期默认高亮显示的是30号,但是我选中其他日期后30号这个数字的高亮并没有移除。 年、月的样式同理。 这显然是不符合需求的,但是又需要用到这些控件,所以就可以通过style来改写el-date-picker的对应样式,以使组件达到需求要求的效果。

实现效果

于是我通过一些查找和样式的改变做出了这个需求需要的效果,如下所示: 默认选中当前年份时: 删除选中时: 选中任意一个年份时: 月的选中与日的选中效果也是与年一致。 月选中效果: 日选中效果:

实现思路找到原始组件选中某个日期,ctrl+F5弹出检查窗口,找到这个高亮的css样式; 然后我们可以得知date-picker组件要使当前日期高亮的css写法为.el-month-table td.today .cell{ color: var(--el-color-primary); font-weight: 700;}【VUE3】ElementUI--el-date-picker下拉控件样式修改(高亮显示设置)(vue3 element-plus)

我们如果要取消这个高亮,就是把它设置成普通样式!

.el-month-table td.today .cell { // 月份 font-weight: normal; // 字体加粗程度改成不加粗 color: #606266; // 未选中状态的日期颜色 }基于这个基础我们就可以其他选择器的css的写法应为:.el-date-table td.today .el-date-table-cell__text { // 日 font-weight: normal; color: #606266; } .el-year-table td.today .cell { // 年 font-weight: normal; color: #606266; }此时页面里就成功得到了日期的选中状态圆圈高亮和年月的选中状态不加粗高亮;

可以看到日期选中器的高亮效果是可以的,但是年和月的选择器高亮效果太素了,甚至没有加粗,所以我们可以再进行一些润色,让这个日期选择器整体看起来都是一个样式的比较协调;.el-year-table td.current:not(.disabled) .cell{ color: #ffffff; font-weight: bold !important; background-color: #409eff; border-radius: 100px; // 设置100是为了让它很圆乎 }

效果如下,就跟日期选择器一样协调了,月选择器的写法也是一样

总结和完整代码

在vue项目中,因 element-UI的时间选择器 el-date-picker 是将元素直接挂载到页面的中,而非自身元素下,所以使用 /deep/、 >>>、 ::v-deep 等穿透无法定位到元素,所以我们可以利用时间选择器的popper-class属性,给下拉框设置样式。

<el-date-picker v-model="value" type="year" // 年份选择器 placeholder="请选择" format="YYYY" value-format="YYYY" popper-class="date_form"/>

然后在src>assets>style里创建table_style.scss,在该文件内进行样式编写

.date_form { .el-year-table td.current:not(.disabled) .cell{ color: #ffffff; font-weight: bold !important; background-color: var(--el-datepicker-active-color); // 这里应用的是项目的默认样式颜色,跟整个系统保持统一 border-radius: 100px; } .el-year-table td.today .cell { font-weight: normal; color: #606266; } .el-month-table td.current:not(.disabled) .cell{ color: #ffffff; font-weight: bold !important; background-color: var(--el-datepicker-active-color); border-radius: 100px; } .el-month-table td.today .cell { font-weight: normal; color: #606266; } .el-date-table td.today .el-date-table-cell__text { color: #606266; font-weight: normal; } .el-date-table td.current:not(.disabled) .el-date-table-cell__text { color: #ffffff; font-weight: bold !important; background-color: var(--el-datepicker-active-color); }}

最后在main.ts引入即可完成样式的修改

import "@/assets/style/table_style.scss";参考资料https://blog.csdn.net/qq_21113235/article/details/126521564.https://www.cnblogs.com/min77/p/14511750.html.
本文链接地址:https://www.jiuchutong.com/zhishi/292939.html 转载请保留说明!

上一篇:仙岩寺中的升仙桥,韩国曹溪山道立公园 (© Aaron Choi/Getty Images)(仙岩寺庙)

下一篇:慕那尔山区的茶园,印度喀拉拉邦 (© SvitlanaBelinska/iStock/Getty Images Plus)(那慕尔省)

  • 我国增值税征收范围
  • 小规模纳税人建筑服务税率是多少
  • 工业企业成本会计核算的对象是什么
  • 研发费用加计扣除留存备查资料
  • 支付宝已经支付的钱怎么退回来
  • 以公允价值计量且变动计入其他综合
  • 滞留票是什么意思
  • 购买礼品赠送客户进项税处理
  • 个体户一个月开票30万怎么上税
  • 股票现金分红
  • 企业劳务外包取费的标准以及依据是什么?
  • 母公司资产转移到子公司
  • 航天金税服务费280怎么缴费
  • 递延所得税年初数和期末数
  • 医疗卫生机构可以向其他单位或者个人分发第一类疫苗
  • 现金日记账有哪几种
  • 做金融服务要什么资格
  • 公账转公账没有发票
  • 王者荣耀如何更改战区
  • 新成立公司开票能开多少个点的发票
  • 住房公积金余额有利息吗
  • 发出商品但货款没到账
  • PHP:imagettfbbox()的用法_GD库图像处理函数
  • 资产减值损失结转怎么算
  • 以旧换新方式销售货物,以实际收取的价格
  • 购买轿车增值税可抵扣吗?
  • 要点初见:Stable Diffusion NovelAI模型优质文字Tag汇总与实践【魔咒汇总】
  • 微信 php sdk
  • php安装及使用教程
  • 制造费用的工资怎么结转
  • vue3使用教程
  • php100 jquery教程
  • 政府性基金账务处理
  • 固定资产折旧的计算方法
  • 已付款收货未收到发票怎么做账
  • python的多进程模块
  • 固定资产折旧准备属于什么科目
  • 公司注销单位公积金账户余额怎么处理
  • 社保年度申报错误可以调整吗
  • access 替换
  • 固定资产摊余价值怎么计算
  • 小微企业所得税怎么算
  • 租办公室自己装修可以拆走吗
  • 商品购进核算
  • 借款可以抵扣企业所得税
  • 更衣柜分配方案
  • 多交个税收到退回怎么办
  • 营改增后增加了什么征税项目
  • 物业公司代收取暖费怎么缴纳税额
  • 期末留抵的税额怎么做分录
  • 手撕发票是
  • 银行日记账的登记依据有哪些
  • 发票是中国独有的吗
  • 建筑企业工程施工科目怎么结转
  • 应收账款较多怎么办
  • win8任务管理器在哪
  • ubuntu20.04怎么用
  • macbook appstore在哪
  • w10预览版21343下载
  • win8语言栏不见了 怎么调出来
  • cpqa1000.exe是安全进程吗 cpqa1000进程有什么作用
  • Linux下which、whereis、locate、find 区别
  • kb2859537是什么文件
  • win10 u盘写保护
  • windows免费升级win10
  • 我是一个打酱油的怎样理解
  • 安卓app开发框架模板
  • 各浏览器网址
  • html竖排改为横排
  • [置顶]bilinovel
  • shell脚本 su
  • js实现兼容性较好的方法
  • 轻松实现js图片识别
  • jquery获取php变量
  • 公司信用等级b级是什么意思
  • 安徽国家税务局网上办税平台
  • 诺诺开票软件怎么领用发票
  • 2024新车购置税政策
  • 代理记账公司账务处理
  • 美国对中国企业的政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设