vue+element UI中如何给指定日期添加标记
更新时间:2024年02月29日 09:03:28 作者:~张小八~
这篇文章主要介绍了vue+element UI中如何给指定日期添加标记问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1.日期控件中添加:picker-options属性
即:picker-options=“myPickerOptions”
<el-date-picker :class="item.scds !=null ?'xtsjBlue':'xtsjRed'" v-model="item.date" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptions" placeholder="选择日期" @change="bsdsChange(item)"> </el-date-picker>
2.在data中定义要标记的日期数组hasXtdsDate
及myPickerOptions处理逻辑,筛选出要标记的日期数组
hasXtdsDate:[],//要标记的数组 pickerOptions: { cellClassName: time => { const month = time.getMonth() + 1; const day = time.getDate(); const val = time.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day); if (this.hasXtdsDate.indexOf(val) >= 0){ return 'hasXtdsDateClass'; //有系统读数的日期显示蓝色 }else { return 'noXtdsDateClass' //没有系统读数的日期显示红色 } } }
3.对要进行标记的日期进行数据筛选
this.meterList = res.bcds res.bcds.forEach(o=>{ o.taskId = row.id o.planId = row.planId o.industrialUserId = row.industrialUserId if(o.xtds !=null || o.xtds !=''){ this.hasXtdsDate.push(o.date) } })
4.自定义日期标记的样式
<style lang="scss"> .hasXtdsDateClass > div > span:after { content: "•"; color: blue; bottom: -16px; position: absolute; font-size: 20px; left: 10px; } .noXtdsDateClass > div > span:after { content: "•"; color: red; bottom: -16px; position: absolute; font-size: 20px; left: 10px; } </style>
效果如下图:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue2.0+ElementUI+PageHelper实现的表格分页功能
ElementUI也是一套很不错的组件库,对于我们经常用到的表格、表单、时间日期选择器等常用组件都有着很好的封装和接口。这篇文章主要介绍了Vue2.0+ElementUI+PageHelper实现的表格分页,需要的朋友可以参考下2021-10-10
最新评论