vue+element UI中给指定日期添加标记_element中如何datepicker 日期选择器自定义给日期添加标记

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>
1
2
3
4
5
6
7
8

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'   //没有系统读数的日期显示红色
                }

              }
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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)
   }
   })
1
2
3
4
5
6
7
8
9

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果如下图：