elementui 日期选择器el-date-picker如何给指定日期添加圆点标注

更新时间：2024年07月02日 11:14:21 作者：weixin_45410246

这篇文章主要介绍了elementui 日期选择器el-date-picker如何给指定日期添加圆点标注,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下

elementui 日期选择器el-date-picker给指定日期添加圆点标注

    <el-date-picker
          v-model="time"
          type="date"
          :clearable="false"
          :picker-options="pickerOptions"
          popper-class="picker-popper"
          placeholder="选择起始时间">
        </el-date-picker>```

对需要添加圆点的日期进行判断
arrayTime为需要添加圆点的日期

  cellClassName (date) {
  if (this.arrayTime.includes(this.dateFormatter('YYYY-MM-DD')(null, null, date))) {
    return 'badge'
  }
},```

添加样式在style标签中加入scoped样式会不生效使用popper-class类名避免样式冲突

.picker-popper .el-date-table__row .badge::after {
  position: absolute;
  content: "";
  left: 17px;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #8080ff;
}```

到此这篇关于elementui 日期选择器el-date-picker给指定日期添加圆点标注的文章就介绍到这了,更多相关elementui 日期选择器el-date-picker内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue2+Elementui Dialog实现封装自定义弹窗组件
在日常的管理系统界面中,我们写的最多的除了列表表格之外,就是各种弹窗组件,本文就来为大家详细介绍一下Vue2如何结合Elementui Dialog实现封装自定义弹窗组件,希望对大家有所帮助
2023-12-12
vue 路由meta 设置导航隐藏与显示功能的示例代码
这篇文章主要介绍了vue 路由meta 设置导航隐藏与显示功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-09-09
Vue项目中大文件切片上传实现秒传与断点续传的详细实现过程
这篇文章主要给大家介绍了关于Vue项目中大文件切片上传实现秒传与断点续传的详细实现过程, 在开发中,如果上传的文件过大,可以考虑分片上传,分片就是说将文件拆分来进行上传,将各个文件的切片传递给后台,然后后台再进行合并,需要的朋友可以参考下
2023-08-08
在vue中使用export default导出的class类方式
这篇文章主要介绍了在vue中使用export default导出的class类方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue测试环境打包与生产环境打包文件数量不一致解决方案
这篇文章主要为大家介绍了vue测试环境打包与生产环境打包文件数量不一致的解决方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
Vue中的父子组件传值.sync
这篇文章主要介绍了Vue中的父子组件传值.sync,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
Vue基础语法知识梳理下篇
这篇文章主要介绍了Vue基础语法知识梳理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-12-12
vue3中组件传值的多种方法总结
学习过vue2的宝子们肯定知道,组件传值是vue项目开发过程中必不可少的功能场景,下面这篇文章主要给大家介绍了关于vue3中组件传值的多种方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-01-01
使用Vue Query实现高级数据获取的示例详解
构建现代大规模应用程序最具挑战性的方面之一是数据获取,这也是 Vue Query 库的用途所在,下面就跟随小编一起学习一下如何利用Vue Query实现高级数据获取吧
2023-08-08
在项目中封装axios的实战过程
这篇文章主要给大家介绍了关于如何在项目中封装axios的相关资料,axios 请求的封装,无非是为了方便代码管理,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-09-09