html 设置日期选择器样式,解决Element UI 日期选择器自定义修改多个样式

需求

背景：通过echart图表加以日期选择器，对用户数据进行动态切换展示，并在日期选择器中标识那天有数据和用户是否查看。

技术选型

采用element ui 2.14.1版本，主要通过picker Options 新增 cellClassName 进行实现。

代码

HTML

element ui 日期选择器

CSS.circle::after {

position: absolute;

content: '';

right: 2px;

top: 4px;

width: 5px;

height: 5px;

border-radius: 50%;

background-color: red;

}

.background span {

background-color: #C6CDEB;

border-radius: 50%;

color: #000;

}

标识当前那些是有数据和用户是否查看数据的样式

JSpickerOptions: {

cellClassName: (time) => {

for (let i = 0; i < this.arr.length; i++) {

if (this.arr[i].time.includes(this.getLocalTime(time.getTime()))) {

return `red ${this.flag == this.arr[i].fy ? 'green':""}`

}

arr 为后台传过来的数组，通过time时间判断是否包含与否，来显示当天是否有数据，通过 flag 字段和后台数据进行匹配，判断用户是否查看当天数据，提示标签的是否隐藏。

后台数据结构arr: [{

fy: true,

time: "2021-01-02"

}, {

fy: false,

time: "2021-01-03"

}, {

fy: true,

time: "2021-01-07"

}]

fy：判断用户点击查看数据 time: 数据具体日期

demo 截图

紫色背景代表有数据的日期，带红色圆点代表有数据但是用户还未查看。

学习记录！！！加油！！！

html 设置日期选择器样式,解决Element UI 日期选择器自定义修改多个样式相关推荐

【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep 22 2017 00:00:00 GM ...
element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
解决 element ui 本地使用引入图标不显示 .ttf和.woff 报错问题
解决 element ui 引入在线地址更换为本地地址后 .ttf和.woff 报错问题原因因为文件内缺少两个文件根据控制台提示发现少了.ttf和.woff两个文件 1)element-ico ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...
vue element ui 时间选择器设置两个时间一前一后
时间选择器,需求是下线时间必须在发布时间之后,但后台是储存两个值,就没使用element UI 的范围选择器在标签设置:picker-options 属性,该属性下disabledDate(),控制 ...
vue ui无效_vue开发中，父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。...
在vue的开发中,我们需要引用子组件,包括ui组件(element.iview).但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的.去掉scoped之后,样式可以覆盖.但这样会 ...
Element UI级联选择器(Cascader)获取级联对象
Element UI Cascader官网文档 GIF 代码: getCascaderObj = function(val, opt){return val.map(function (value, ...
【RuoYi-Vue-Plus 实现日期范围查询 Mybatis-Plus Element UI JavaScript 】
Element UI 实现日期范围查询,多个日期范围查询. 文章目录 Element UI 实现日期范围查询,多个日期范围查询. 前言一.前端Element - UI(DatePicker 日期选择 ...

html 设置日期选择器样式,解决Element UI 日期选择器自定义修改多个样式

html 设置日期选择器样式,解决Element UI 日期选择器自定义修改多个样式相关推荐

最新文章

热门文章