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>
效果如下圖:

總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用element-ui的el-date-picker設(shè)置樣式無效的解決
本文主要介紹了vue使用element-ui的el-date-picker設(shè)置樣式無效的解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
ant-design表單處理和常用方法及自定義驗(yàn)證操作
這篇文章主要介紹了ant-design表單處理和常用方法及自定義驗(yàn)證操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue3+Vite項(xiàng)目使用mockjs隨機(jī)模擬數(shù)據(jù)
這篇文章主要介紹了Vue3+Vite項(xiàng)目使用mockjs隨機(jī)模擬數(shù)據(jù),需要的朋友可以參考下2023-01-01
vue實(shí)現(xiàn)四級導(dǎo)航及驗(yàn)證碼的方法實(shí)例
我們在做項(xiàng)目經(jīng)常會遇到多級導(dǎo)航這個需求,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)四級導(dǎo)航及驗(yàn)證碼的相關(guān)資料,文章通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
vue-cli啟動本地服務(wù)局域網(wǎng)不能訪問的原因分析
這篇文章主要介紹了vue-cli啟動本地服務(wù),局域網(wǎng)下訪問不到的原因分析,在文中還給大家介紹了vue-cli起的webpack項(xiàng)目 用localhost可以訪問,但是切換到ip就不可以訪問 的原因,本文給大家介紹的非常詳細(xì),需要的朋友參考下2018-01-01
Vue應(yīng)用中504錯誤(Gateway timeout)的原因與解決方法
在Vue前端應(yīng)用中遇到504代理錯誤通常是由于請求在到達(dá)服務(wù)器之前超時,504錯誤表示網(wǎng)關(guān)超時,可能由后端服務(wù)響應(yīng)慢、網(wǎng)絡(luò)問題、代理配置錯誤、請求負(fù)載過大、前端請求超時設(shè)置不當(dāng)、服務(wù)器資源不足或第三方服務(wù)問題引起2024-09-09

