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>

效果如下图:

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue实现简单计算器

    Vue实现简单计算器

    这篇文章主要为大家详细介绍了Vue实现简单计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • VUE3之Non-Props属性的具体使用

    VUE3之Non-Props属性的具体使用

    本文主要介绍了VUE3之Non-Props属性的具体使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue监听dom大小改变案例

    vue监听dom大小改变案例

    这篇文章主要介绍了vue监听dom大小改变案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue项目无法删除的问题及解决

    vue项目无法删除的问题及解决

    这篇文章主要介绍了vue项目无法删除的问题及解决方案,具有很好的参考价值,希望对的大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue2.0+ElementUI+PageHelper实现的表格分页功能

    Vue2.0+ElementUI+PageHelper实现的表格分页功能

    ElementUI也是一套很不错的组件库,对于我们经常用到的表格、表单、时间日期选择器等常用组件都有着很好的封装和接口。这篇文章主要介绍了Vue2.0+ElementUI+PageHelper实现的表格分页,需要的朋友可以参考下
    2021-10-10
  • 详解Vue-基本标签和自定义控件

    详解Vue-基本标签和自定义控件

    本篇文章主要介绍了Vue-基本标签和自定义控件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 去掉vue 中的代码规范检测两种方法(Eslint验证)

    去掉vue 中的代码规范检测两种方法(Eslint验证)

    我们在使用vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写。这时我们需要关闭,这里脚本之家小编给大家带来了去掉vue 中的代码规范检测两种方法(Eslint验证),一起看看吧
    2018-03-03
  • vue获取input输入值的问题解决办法

    vue获取input输入值的问题解决办法

    这篇文章主要介绍了vue获取input输入值的问题解决办法的相关资料,希望通过本文能帮助到大家,让大家掌握这样的问题,需要的朋友可以参考下
    2017-10-10
  • 在vscode 中设置 vue模板内容的方法

    在vscode 中设置 vue模板内容的方法

    这篇文章主要介绍了在vscode 中设置 vue模板内容的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • vue实现列表无缝循环滚动

    vue实现列表无缝循环滚动

    这篇文章主要为大家详细介绍了vue实现列表无缝循环滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论