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.對(duì)要進(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>
效果如下圖:

總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決
這篇文章主要介紹了vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
淺談將three項(xiàng)目遷移至vue項(xiàng)目遇到的問題
本文主要介紹了將three項(xiàng)目遷移至vue項(xiàng)目遇到的問題,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01
教你如何使用VUE組件創(chuàng)建SpreadJS自定義單元格
這篇文章主要介紹了使用VUE組件創(chuàng)建SpreadJS自定義單元格的方法,通常我們使用組件的方式是,在實(shí)例化Vue對(duì)象之前,通過Vue.component方法來注冊(cè)全局的組件,文中通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2022-01-01
vuex中store存儲(chǔ)store.commit和store.dispatch的用法
這篇文章主要介紹了vuex中store存儲(chǔ)store.commit和store.dispatch的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue Router動(dòng)態(tài)路由使用方法總結(jié)
這篇文章主要介紹了Vue Router動(dòng)態(tài)路由使用方法總結(jié),需要的朋友可以參考下2023-10-10
vue實(shí)現(xiàn)自定義日期組件功能的實(shí)例代碼
這篇文章主要介紹了vue自定義日期組件的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
Vue-cli 如何將px轉(zhuǎn)化為rem適配移動(dòng)端
這篇文章主要介紹了Vue-cli 如何將px轉(zhuǎn)化為rem適配移動(dòng)端,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07

