亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

element?ui?el-calendar日歷組件使用方法總結(jié)

 更新時間:2023年07月26日 16:06:10   作者:歐陽呀  
這篇文章主要給大家介紹了關(guān)于element?ui?el-calendar日歷組件使用方法的相關(guān)資料,elementui是一款基于Vue.js的UI框架,其中的日歷組件calendar是elementui中非常常用的組件之一,需要的朋友可以參考下

1. 需求說明

按月顯示,每次只顯示一個月的日期,其余隱藏

日歷組件的顯示時間隨著上方選擇框的變化(比如我切換到6月份,下面也要同步切換到6月份)

點擊某一天可以添加事項(如果是空白的,未添加的),展示在對應(yīng)的框里,同時添加懸浮展示的組件

如果是點擊有事項的,則是編輯事項(這里展示的是不同的彈框)

每一月的數(shù)據(jù)存到數(shù)據(jù)庫

2. 基礎(chǔ)實現(xiàn)

這里做的是數(shù)據(jù)渲染,以及事件綁定,新增與編輯是點擊不同的地方

     <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 }}個微信號,
                        計劃投放{{ items.planNumber }},
                        實際加人
                        {{ items.realityNumber }}
                      </div>
                    </div>
                    // 這里寫兩遍是因為一個是框里展示,一個是懸浮組件內(nèi)展示的內(nèi)容
                    <div v-for="items in item.timeDetailsList" :key="items.day">
                      {{ items.channelName }} :
                      {{ items.wechatNumber }}個微信號,
                      計劃投放{{ items.planNumber }},
                      實際加人
                      {{ items.realityNumber }}
                    </div>
                  </el-tooltip>
                </span>
              </div>
            </div>
          </template>
        </el-calendar>

3. 只展示當(dāng)月數(shù)據(jù)

這個其實官網(wǎng)有說明

但實際做起來是比較麻煩的,后面審查元素,找到了新大陸:

不同月份的日期是有不同的 class 標識的,一個邪惡的想法便出來了,那用 css 就可以搞定,何必費勁巴拉的寫 js

算是走了個捷徑吧,僅供參考,代碼如下:

  ::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ù)實現(xiàn)

這個就更簡單了,監(jiān)聽輸入框的時間變化,傳入 日歷組件的model 即可,代碼如下:

monthChange(val) {
  // 這里是監(jiān)聽時間變化 => @change="monthChange",然后傳入日歷組件
  this.value = val;
  // 時間切換的時候,順便調(diào)個接口查詢當(dāng)月數(shù)據(jù)
  this.editDetail();
},

5. 順便把快捷方式隱藏了,不讓用戶選擇上一個月下一個月

  • 因為在此處的需求,需要手動查詢,根據(jù)上方時間變化匹配對應(yīng)數(shù)據(jù)
  • 所以用戶點這個玩意也費勁,還要加事件監(jiān)聽,費力不討好了
  • 實現(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用法解讀

    這篇文章主要介紹了vue使用keep-alive無效以及include和exclude用法解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • vue通過獲取url中的信息登錄頁面的代碼詳解

    vue通過獲取url中的信息登錄頁面的代碼詳解

    這篇文章主要給大家介紹了vue通過獲取url中的信息登錄頁面的方法,文中通過代碼示例給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下
    2024-02-02
  • vue-router 2.0 跳轉(zhuǎn)之router.push()用法說明

    vue-router 2.0 跳轉(zhuǎn)之router.push()用法說明

    這篇文章主要介紹了vue-router 2.0 跳轉(zhuǎn)之router.push()用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue批量注冊組件實現(xiàn)動態(tài)組件技巧

    Vue批量注冊組件實現(xiàn)動態(tài)組件技巧

    Vue 動態(tài)組件的應(yīng)用場景很多,可應(yīng)用于動態(tài)頁簽,動態(tài)路由等場景,其核心原理是批量注冊,在Vue2和Vue3中實現(xiàn)原理相同,只是語法略有差異,本文給大家介紹了Vue批量注冊組件實現(xiàn)動態(tài)組件技巧,需要的朋友可以參考下
    2024-11-11
  • 前端vue面試總問watch和computed區(qū)別及建議總結(jié)

    前端vue面試總問watch和computed區(qū)別及建議總結(jié)

    在現(xiàn)代前端的面試中,vue和react是面試過程中基本必問的技術(shù)棧,其中Vue響應(yīng)式話題,watch和computed是面試官非常喜歡聊的主題,雖然watch和computed它們都用于監(jiān)聽數(shù)據(jù)的變化,但它們在實現(xiàn)原理、使用場景和行為上有著顯著的區(qū)別,本文將深入探討,并提供一些面試過程中的建議
    2023-10-10
  • Vue組件間傳遞數(shù)據(jù)的多種方法

    Vue組件間傳遞數(shù)據(jù)的多種方法

    在實際開發(fā)中,Vue組件之間的數(shù)據(jù)傳遞是最常見的需求,由于組件的作用域相互獨立,如何在父子、兄弟和跨級組件間傳遞數(shù)據(jù)就顯得尤為重要,本文將詳細介紹多種Vue組件間傳遞數(shù)據(jù)的方,需要的朋友可以參考下
    2025-03-03
  • vue+element實現(xiàn)下拉菜單并帶本地搜索功能示例詳解

    vue+element實現(xiàn)下拉菜單并帶本地搜索功能示例詳解

    這篇文章主要介紹了vue+element實現(xiàn)下拉菜單并帶本地搜索功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-09-09
  • 一文帶你簡單理解Vue的data為何只能是函數(shù)

    一文帶你簡單理解Vue的data為何只能是函數(shù)

    如果data是一個函數(shù)的話,這樣每復(fù)用一次組件,就會返回一份新的data,下面這篇文章主要給大家介紹了關(guān)于簡單理解Vue的data為啥只能是函數(shù)的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • vue 實現(xiàn)上傳組件

    vue 實現(xiàn)上傳組件

    雖然前端UI框架大都提供文件上傳的組件,以及很多插件可供選擇,工作中可能不需要我們手寫一個上傳組件,但是從零封裝組件對學(xué)習(xí)是很有助益的。下文為大家介紹使用Vue3+TypeScript實現(xiàn)的一個文件上傳的功能,目前只實現(xiàn)上傳等基本功能,后續(xù)會逐漸對功能進行擴展
    2021-05-05
  • Vue input輸入框中的值如何變成黑點問題

    Vue input輸入框中的值如何變成黑點問題

    這篇文章主要介紹了Vue input輸入框中的值如何變成黑點問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04

最新評論