VUE+Element-ui實(shí)戰(zhàn)之使用el-calendar日歷自定義顯示內(nèi)容
1、確保添加el-calendar組件
確保你的element引入了el-calendar組件
這里不再贅述
2、遍歷日期,確定顯示內(nèi)容
3、最終實(shí)現(xiàn)效果
4、完整代碼
<template> <div class="main_con"> <div style="text-align: left;"> <H2>施工日志</H2> <el-divider></el-divider> </div> <el-calendar> <template slot="dateCell" slot-scope="{date, data}"> {{ data.day.split('-').slice(1).join('-') }} <div style="width:100%;" v-for="item in scheduleData" :key="item"> <el-tag type="danger" v-if="(item.workingDay).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> {{item.content}} </el-tag> </div> </template> </el-calendar> </div> </template>
<script> export default { name: "PatrolSchedule", components: {}, data() { return { value: new Date(), scheduleData: [ { workingDay: "02", content: "土方開挖", }, { workingDay: "03", content: "地基驗(yàn)坑", }, { workingDay: "04", content: "地基回填", }, { workingDay: "05", content: "基礎(chǔ)墊層模", }, { workingDay: "06", content: "基礎(chǔ)墊層混凝土澆筑", }, { workingDay: "07", content: "基礎(chǔ)鋼筋綁扎", }, ], }; }, mounted() {}, methods: {}, }; </script>
<style scoped> /deep/.el-calendar-day { box-sizing: border-box; padding: 5px; height: 80px; } </style>
總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vxe-table?實(shí)現(xiàn)按回車鍵自動新增一行(示例代碼)
本文通過示例代碼介紹了vxe-table新版本中實(shí)現(xiàn)回車自動換行功能的方法,通過設(shè)置keyboard-config.isLastEnterAppendRow參數(shù)可以控制是否開啟該功能,當(dāng)回車鍵在最后一行按下時,會自動新增一行,并將光標(biāo)移動到新行,代碼簡單易懂,感興趣的朋友跟隨小編一起看看吧2024-12-12使用Vue3和Plotly.js打造一個3D圖在線展示的實(shí)現(xiàn)步驟
三維網(wǎng)格圖廣泛應(yīng)用于科學(xué)可視化、醫(yī)學(xué)成像、工程設(shè)計等領(lǐng)域,用于展示復(fù)雜的數(shù)據(jù)結(jié)構(gòu)和空間分布,本文給大家介紹了使用Vue3和Plotly.js打造一個3D圖在線展示的實(shí)現(xiàn)步驟,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-07-07vue中子組件向父組件傳遞數(shù)據(jù)的實(shí)例代碼(實(shí)現(xiàn)加減功能)
這篇文章主要介紹了vue中子組件向父組件傳遞數(shù)據(jù)的實(shí)例代碼(實(shí)現(xiàn)加減功能) ,需要的朋友可以參考下2018-04-04VueCLI通過process.env配置環(huán)境變量的實(shí)現(xiàn)
本文主要介紹了VueCLI通過process.env配置環(huán)境變量的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue前端sku實(shí)現(xiàn)的方法小結(jié)
這篇文章主要為大家詳細(xì)介紹了vue前端sku實(shí)現(xiàn)的相關(guān)方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-11-11Vue純前端使用exceljs導(dǎo)出excel文件的完整圖文教程
這篇文章將一步一步為大家詳細(xì)介紹一下exceljs插件中的使用,以及如何使用exceljs導(dǎo)出excel文件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03vue學(xué)習(xí)教程之帶你一步步詳細(xì)解析vue-cli
這篇文章的主題是vue-cli的理解?;蛟S,很多人在開發(fā)vue的時候,我們會發(fā)現(xiàn)一個問題——只會去用,而不明白它的里面的東西?,F(xiàn)在的框架可以說是足夠的優(yōu)秀,讓開發(fā)者不用為搭建開發(fā)環(huán)境而煩惱。但是有時候,我們還是得回到原始生活體驗(yàn)一下,才能夠讓自己更上層樓。2017-12-12