element?ui?el-calendar日歷組件使用方法總結(jié)
更新時(shí)間：2023年07月26日 16:06:10 作者：歐陽呀
這篇文章主要給大家介紹了關(guān)于element?ui?el-calendar日歷組件使用方法的相關(guān)資料,elementui是一款基于Vue.js的UI框架,其中的日歷組件calendar是elementui中非常常用的組件之一,需要的朋友可以參考下
1. 需求說明
按月顯示，每次只顯示一個(gè)月的日期，其余隱藏
日歷組件的顯示時(shí)間隨著上方選擇框的變化（比如我切換到6月份，下面也要同步切換到6月份）
點(diǎn)擊某一天可以添加事項(xiàng)（如果是空白的，未添加的），展示在對應(yīng)的框里，同時(shí)添加懸浮展示的組件
如果是點(diǎn)擊有事項(xiàng)的，則是編輯事項(xiàng)（這里展示的是不同的彈框）
每一月的數(shù)據(jù)存到數(shù)據(jù)庫
2. 基礎(chǔ)實(shí)現(xiàn)
這里做的是數(shù)據(jù)渲染，以及事件綁定，新增與編輯是點(diǎn)擊不同的地方
<el-calendar v-model="value">
<template slot="dateCell" slot-scope="{ date, data }">
<div class="main-cd" @click="addPlan()">
<div class="calendar-day">
{{ data.day.split("-").slice(2).join("-") }}
</div>
<div
v-for="(item, index) in calendarData"
:key="index"
class="is-selected"
@click.stop="addPlan(item)"
>
<span v-if="item.day == data.day && item.timeDetailsList">
<el-tooltip placement="top">
<div slot="content">
<div
v-for="items in item.timeDetailsList"
:key="items.day"
>
{{ items.channelName }} :
{{ items.wechatNumber }}個(gè)微信號，
計(jì)劃投放{{ items.planNumber }}，
實(shí)際加人
{{ items.realityNumber }}
</div>
</div>
// 這里寫兩遍是因?yàn)橐粋€(gè)是框里展示，一個(gè)是懸浮組件內(nèi)展示的內(nèi)容
<div v-for="items in item.timeDetailsList" :key="items.day">
{{ items.channelName }} :
{{ items.wechatNumber }}個(gè)微信號，
計(jì)劃投放{{ items.planNumber }}，
實(shí)際加人
{{ items.realityNumber }}
</div>
</el-tooltip>
</span>
</div>
</div>
</template>
</el-calendar>3. 只展示當(dāng)月數(shù)據(jù)
這個(gè)其實(shí)官網(wǎng)有說明
但實(shí)際做起來是比較麻煩的，后面審查元素，找到了新大陸：
不同月份的日期是有不同的 class 標(biāo)識的，一個(gè)邪惡的想法便出來了，那用 css 就可以搞定，何必費(fèi)勁巴拉的寫 js
算是走了個(gè)捷徑吧，僅供參考，代碼如下：
::v-deep .el-calendar-table:not(.is-range) td.next {
display: none;
}
::v-deep .el-calendar-table:not(.is-range) td.prev {
visibility: hidden;
}4. 動態(tài)切換日歷里的數(shù)據(jù)實(shí)現(xiàn)
這個(gè)就更簡單了，監(jiān)聽輸入框的時(shí)間變化，傳入 日歷組件的model 即可，代碼如下：
monthChange(val) {
// 這里是監(jiān)聽時(shí)間變化 => @change="monthChange"，然后傳入日歷組件
this.value = val;
// 時(shí)間切換的時(shí)候，順便調(diào)個(gè)接口查詢當(dāng)月數(shù)據(jù)
this.editDetail();
},5. 順便把快捷方式隱藏了，不讓用戶選擇上一個(gè)月下一個(gè)月
- 因?yàn)樵诖颂幍男枨?，需要手動查詢，根?jù)上方時(shí)間變化匹配對應(yīng)數(shù)據(jù)
- 所以用戶點(diǎn)這個(gè)玩意也費(fèi)勁，還要加事件監(jiān)聽，費(fèi)力不討好了
- 實(shí)現(xiàn)也很簡單，還是 css 搞定（審查元素就行了），代碼如下：
::v-deep .el-calendar__button-group {
display: none;
}總結(jié)
到此這篇關(guān)于element ui el-calendar日歷組件使用方法的文章就介紹到這了,更多相關(guān)elementui el-calendar日歷組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue使用keep-alive無效以及include和exclude用法解讀
這篇文章主要介紹了vue使用keep-alive無效以及include和exclude用法解讀，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要給大家介紹了vue通過獲取url中的信息登錄頁面的方法,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-02-02
vue-router 2.0 跳轉(zhuǎn)之router.push()用法說明
這篇文章主要介紹了vue-router 2.0 跳轉(zhuǎn)之router.push()用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue批量注冊組件實(shí)現(xiàn)動態(tài)組件技巧
Vue 動態(tài)組件的應(yīng)用場景很多,可應(yīng)用于動態(tài)頁簽,動態(tài)路由等場景,其核心原理是批量注冊,在Vue2和Vue3中實(shí)現(xiàn)原理相同,只是語法略有差異,本文給大家介紹了Vue批量注冊組件實(shí)現(xiàn)動態(tài)組件技巧,需要的朋友可以參考下2024-11-11
前端vue面試總問watch和computed區(qū)別及建議總結(jié)
在現(xiàn)代前端的面試中,vue和react是面試過程中基本必問的技術(shù)棧,其中Vue響應(yīng)式話題,watch和computed是面試官非常喜歡聊的主題,雖然watch和computed它們都用于監(jiān)聽數(shù)據(jù)的變化,但它們在實(shí)現(xiàn)原理、使用場景和行為上有著顯著的區(qū)別,本文將深入探討,并提供一些面試過程中的建議2023-10-10
在實(shí)際開發(fā)中,Vue組件之間的數(shù)據(jù)傳遞是最常見的需求,由于組件的作用域相互獨(dú)立,如何在父子、兄弟和跨級組件間傳遞數(shù)據(jù)就顯得尤為重要,本文將詳細(xì)介紹多種Vue組件間傳遞數(shù)據(jù)的方,需要的朋友可以參考下2025-03-03
vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能示例詳解
這篇文章主要介紹了vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-09-09
如果data是一個(gè)函數(shù)的話,這樣每復(fù)用一次組件,就會返回一份新的data,下面這篇文章主要給大家介紹了關(guān)于簡單理解Vue的data為啥只能是函數(shù)的相關(guān)資料,需要的朋友可以參考下2022-10-10
雖然前端UI框架大都提供文件上傳的組件，以及很多插件可供選擇，工作中可能不需要我們手寫一個(gè)上傳組件，但是從零封裝組件對學(xué)習(xí)是很有助益的。下文為大家介紹使用Vue3+TypeScript實(shí)現(xiàn)的一個(gè)文件上傳的功能，目前只實(shí)現(xiàn)上傳等基本功能，后續(xù)會逐漸對功能進(jìn)行擴(kuò)展2021-05-05
這篇文章主要介紹了Vue input輸入框中的值如何變成黑點(diǎn)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04