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使用element-ui的el-date-picker设置样式无效的解决

    vue使用element-ui的el-date-picker设置样式无效的解决

    本文主要介绍了vue使用element-ui的el-date-picker设置样式无效的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • ant-design表单处理和常用方法及自定义验证操作

    ant-design表单处理和常用方法及自定义验证操作

    这篇文章主要介绍了ant-design表单处理和常用方法及自定义验证操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue 中使用 bimface详情

    vue 中使用 bimface详情

    这篇文章主要介绍了vue 中使用 bimface详情,分别有安装 vue 脚手架、创建项目、引入 bimface 响应的文件、修改 App.vue 文件,实现页面渲染等步骤,需要的小伙伴可以参考一下
    2021-12-12
  • Vue3+Vite项目使用mockjs随机模拟数据

    Vue3+Vite项目使用mockjs随机模拟数据

    这篇文章主要介绍了Vue3+Vite项目使用mockjs随机模拟数据,需要的朋友可以参考下
    2023-01-01
  • vue.js父组件使用外部对象的方法示例

    vue.js父组件使用外部对象的方法示例

    在我们日常开发中经常因为思维定式,我们会犯一些奇怪的错误,有时候看似简单的问题却给出了复杂的解决方案。下面这篇文章主要介绍了vue.js父组件使用外部对象的方法,这个看似简单却绕了一些弯路的问题,有必要和大家分享下,需要的朋友可以参考学习,下面来看看吧。
    2017-04-04
  • vue实现四级导航及验证码的方法实例

    vue实现四级导航及验证码的方法实例

    我们在做项目经常会遇到多级导航这个需求,所以下面这篇文章主要给大家介绍了关于vue实现四级导航及验证码的相关资料,文章通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-07-07
  • Vue项目中使用Bootstrap

    Vue项目中使用Bootstrap

    这篇文章介绍了Vue项目中使用Bootstrap的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vue-cli启动本地服务局域网不能访问的原因分析

    vue-cli启动本地服务局域网不能访问的原因分析

    这篇文章主要介绍了vue-cli启动本地服务,局域网下访问不到的原因分析,在文中还给大家介绍了vue-cli起的webpack项目 用localhost可以访问,但是切换到ip就不可以访问 的原因,本文给大家介绍的非常详细,需要的朋友参考下
    2018-01-01
  • Vue应用中504错误(Gateway timeout)的原因与解决方法

    Vue应用中504错误(Gateway timeout)的原因与解决方法

    在Vue前端应用中遇到504代理错误通常是由于请求在到达服务器之前超时,504错误表示网关超时,可能由后端服务响应慢、网络问题、代理配置错误、请求负载过大、前端请求超时设置不当、服务器资源不足或第三方服务问题引起
    2024-09-09
  • VUE3使用JSON编辑器方式

    VUE3使用JSON编辑器方式

    这篇文章主要介绍了VUE3使用JSON编辑器方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论