vue+element UI中给指定日期添加标记

这篇具有很好参考价值的文章主要介绍了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>

效果如下图:
elementui添加日期备注,vue.js,ui,javascript文章来源地址https://www.toymoban.com/news/detail-843066.html

到了这里,关于vue+element UI中给指定日期添加标记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui el-date-picker 禁止选择指定日期

    1)禁止选择当天之前的日期 禁止选择包含当天及其之前的日期 2)禁用选择当天之后的日期 禁止选择包含当天及其之后的日期 3)禁止选择自定义加载的日期,比如打开编辑框,禁止选择当前数据回显日期之前的日期 禁止选择之后  禁止选择之前   - 8.64e7 表示可选择当天时

    2024年02月11日
    浏览(178)
  • 1、关于Element-UI日期范围选择器控件添加清空、确定按钮

    1、日期控件原来样式 现在我们需要在日期控件右下角添加按钮(如下方示例) 2、实现方式

    2024年02月16日
    浏览(46)
  • Element UI el-date-picker datetime 日期时间选择器 底部添加清除按钮

    客户需要在时间选择器点击后在选择面板的下方添加一个清除按钮进行时间的清除,不想使用自带的清除小x按钮。 element-ui并没有暴露可以自定义按钮与事件。 我想到了两个方案解决 1.使用组件提供的快捷方法 Shortcuts 完成,需要把样式调整到对应的位置。由于我最终没有选

    2024年04月10日
    浏览(61)
  • vue element-ui年份范围选择器,年日期插件,可选日期区间等

    可以禁止选择未来日期,以及可选的日期范围控制,代码在最下面。 直接上代码: 先来一个不禁止选择的示例 yearDate.js文件 我是禁止了未来日期,时间跨度,只能选3年, 代码如下: 参考地址:https://www.jianshu.com/p/44584a4a4953

    2024年02月11日
    浏览(47)
  • vue+element ui生成以当月日期时间为表头的table表格

    最近在写项目的时候遇到了一个新的需求,就是需要生成一个以当前月份日期时间为表头的表格,用来展示这个月的值班情况 表格上方有切换月份的按钮,切换对应的月份,表头要显示对应的月份的日期以及对应月份下面的数据,没有安排值班的日期,用/表示,属于当天的

    2024年02月08日
    浏览(56)
  • vue element-ui blur触发事件 vue中使用@blur获取input val值 elementui+vue

    vue中使用@blur获取input val值

    2024年02月11日
    浏览(47)
  • vue+elementui项目打包后部署到测试环境icon全部丢失【element-ui】大版本升级element-ui后,icon全部丢失

    问题:vue+elementui项目打包后部署到测试环境icon全部丢失【element-ui】大版本升级element-ui后,icon全部丢失 解决办法及原因: elementui在2.12版本中icon数量较之2.4.9版本的扩展2倍不止。原来webpack中对于字体loader的限制是limit10000,就会将字体转换为base64,2.12版本中字节已经超过

    2024年02月16日
    浏览(64)
  • vue修改element-ui日期下拉框datetimePicker的背景色样式

    在vue项目中,源datetimePicker的背景样式,往往与项目背景不搭,需要修改。   1.先在assets里面新建一个index.css文件来存储全局样式 2.在main.js里面导入这个css文件最后在里面加入我们想要的样式 此时的效果如下图   3.在el-date-picker中设置样式 4.设置对应的背景样式 得到下图效果

    2024年02月11日
    浏览(66)
  • vue + element-ui 循环生成指定form表单

    最近遇到一个需要超级写超级多字段的表单,初略计算大概四十来个吧字段吧,/(ㄒoㄒ)/~~,这也太麻烦了,想了想能不能简单封装一下,找到了个巨人,嗯哼,就踩一下吧 参考文章: Vue3.0 根据JSON对象生成指定form表单 上面文章是vue3的,逻辑都一样。以下是vue2 我的写法 注

    2024年02月11日
    浏览(53)
  • vue+element ui 表格添加多个搜索条件筛选(前端查询)

    filterList 为筛选后的数据,可以重新给tableData赋值,赋值后如果遇到表格数据不刷新的情况,可以给table加上一个随机的key。这样可以解决重新赋值页面不刷新的情况。

    2024年02月16日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包