快捷導(dǎo)航

vue+element UI中如何給指定日期添加標(biāo)記

更新時間：2024年02月29日 09:03:28 作者：~張小八~

這篇文章主要介紹了vue+element UI中如何給指定日期添加標(biāo)記問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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中定義要標(biāo)記的日期數(shù)組hasXtdsDate

及myPickerOptions處理邏輯，篩選出要標(biāo)記的日期數(shù)組

hasXtdsDate:[],//要標(biāo)記的數(shù)組
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';  //有系統(tǒng)讀數(shù)的日期顯示藍(lán)色
                }else {
                  return 'noXtdsDateClass'   //沒有系統(tǒng)讀數(shù)的日期顯示紅色
                }

              }
            }

3.對要進(jìn)行標(biāo)記的日期進(jìn)行數(shù)據(jù)篩選

 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.自定義日期標(biāo)記的樣式

<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>

效果如下圖：