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>
效果如下圖：
總結(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
這篇文章主要介紹了vue?中使用?bimface詳情,分別有安裝?vue?腳手架、創(chuàng)建項(xiàng)目、引入?bimface?響應(yīng)的文件、修改?App.vue?文件，實(shí)現(xiàn)頁面渲染等步驟，需要的小伙伴可以參考一下2021-12-12
Vue3+Vite項(xiàng)目使用mockjs隨機(jī)模擬數(shù)據(jù)
這篇文章主要介紹了Vue3+Vite項(xiàng)目使用mockjs隨機(jī)模擬數(shù)據(jù),需要的朋友可以參考下2023-01-01
在我們?nèi)粘ｉ_發(fā)中經(jīng)常因?yàn)樗季S定式，我們會犯一些奇怪的錯誤，有時候看似簡單的問題卻給出了復(fù)雜的解決方案。下面這篇文章主要介紹了vue.js父組件使用外部對象的方法，這個看似簡單卻繞了一些彎路的問題，有必要和大家分享下，需要的朋友可以參考學(xué)習(xí)，下面來看看吧。2017-04-04
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項(xiàng)目中使用Bootstrap的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
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
這篇文章主要介紹了VUE3使用JSON編輯器方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10