位置: IT常识 - 正文
【VUE3】ElementUI--el-date-picker下拉控件样式修改（高亮显示设置）(vue3 element-plus)
编辑：rootadmin推荐整理分享【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;}
我们如果要取消这个高亮，就是把它设置成普通样式！
.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.上一篇：仙岩寺中的升仙桥，韩国曹溪山道立公园 (© Aaron Choi/Getty Images)(仙岩寺庙)
下一篇：慕那尔山区的茶园，印度喀拉拉邦 (© SvitlanaBelinska/iStock/Getty Images Plus)(那慕尔省)
