vue+element UI中如何給指定日期添加標記
更新時間：2024年02月29日 09:03:28 作者：~張小八~
這篇文章主要介紹了vue+element UI中如何給指定日期添加標記問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
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中定義要標記的日期數(shù)組hasXtdsDate
及myPickerOptions處理邏輯，篩選出要標記的日期數(shù)組
hasXtdsDate:[],//要標記的數(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ù)的日期顯示藍色
}else {
return 'noXtdsDateClass' //沒有系統(tǒng)讀數(shù)的日期顯示紅色
}
}
}
3.對要進行標記的日期進行數(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.自定義日期標記的樣式
<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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決
這篇文章主要介紹了vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了將three項目遷移至vue項目遇到的問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹vue.js Router嵌套路由,平時訪問首頁,里面有新聞類的/home/news,還有信息類的/home/message這時候就需要使用到嵌套路由,下面我們就來具體學(xué)習(xí)嵌套路由的原理,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了Vue中的ESLint配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
教你如何使用VUE組件創(chuàng)建SpreadJS自定義單元格
這篇文章主要介紹了使用VUE組件創(chuàng)建SpreadJS自定義單元格的方法，通常我們使用組件的方式是，在實例化Vue對象之前，通過Vue.component方法來注冊全局的組件,文中通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2022-01-01
這篇文章主要介紹了vue中nextTick的相關(guān)資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vuex中store存儲store.commit和store.dispatch的用法
這篇文章主要介紹了vuex中store存儲store.commit和store.dispatch的用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue Router動態(tài)路由使用方法總結(jié)
這篇文章主要介紹了Vue Router動態(tài)路由使用方法總結(jié),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue自定義日期組件的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
Vue-cli 如何將px轉(zhuǎn)化為rem適配移動端
這篇文章主要介紹了Vue-cli 如何將px轉(zhuǎn)化為rem適配移動端,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07