vue+element UI中如何給指定日期添加標(biāo)記
更新時(shí)間：2024年02月29日 09:03:28 作者：~張小八~
這篇文章主要介紹了vue+element UI中如何給指定日期添加標(biāo)記問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
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)目遇到的問(wèn)題
本文主要介紹了將three項(xiàng)目遷移至vue項(xiàng)目遇到的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹vue.js Router嵌套路由,平時(shí)訪問(wèn)首頁(yè),里面有新聞?lì)惖?home/news,還有信息類的/home/message這時(shí)候就需要使用到嵌套路由,下面我們就來(lái)具體學(xué)習(xí)嵌套路由的原理,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了Vue中的ESLint配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
教你如何使用VUE組件創(chuàng)建SpreadJS自定義單元格
這篇文章主要介紹了使用VUE組件創(chuàng)建SpreadJS自定義單元格的方法，通常我們使用組件的方式是，在實(shí)例化Vue對(duì)象之前，通過(guò)Vue.component方法來(lái)注冊(cè)全局的組件,文中通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-01-01
這篇文章主要介紹了vue中nextTick的相關(guān)資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vuex中store存儲(chǔ)store.commit和store.dispatch的用法
這篇文章主要介紹了vuex中store存儲(chǔ)store.commit和store.dispatch的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧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