VUE+Element-ui實戰(zhàn)之使用el-calendar日歷自定義顯示內容
更新時間:2024年03月21日 17:21:48 作者:菜鳥茜
這篇文章主要介紹了VUE+Element-ui實戰(zhàn)之使用el-calendar日歷自定義顯示內容方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1、確保添加el-calendar組件
確保你的element引入了el-calendar組件
這里不再贅述
2、遍歷日期,確定顯示內容

3、最終實現(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: "地基驗坑",
},
{
workingDay: "04",
content: "地基回填",
},
{
workingDay: "05",
content: "基礎墊層模",
},
{
workingDay: "06",
content: "基礎墊層混凝土澆筑",
},
{
workingDay: "07",
content: "基礎鋼筋綁扎",
},
],
};
},
mounted() {},
methods: {},
};
</script><style scoped>
/deep/.el-calendar-day {
box-sizing: border-box;
padding: 5px;
height: 80px;
}
</style>總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vxe-table?實現(xiàn)按回車鍵自動新增一行(示例代碼)
本文通過示例代碼介紹了vxe-table新版本中實現(xiàn)回車自動換行功能的方法,通過設置keyboard-config.isLastEnterAppendRow參數(shù)可以控制是否開啟該功能,當回車鍵在最后一行按下時,會自動新增一行,并將光標移動到新行,代碼簡單易懂,感興趣的朋友跟隨小編一起看看吧2024-12-12
使用Vue3和Plotly.js打造一個3D圖在線展示的實現(xiàn)步驟
三維網(wǎng)格圖廣泛應用于科學可視化、醫(yī)學成像、工程設計等領域,用于展示復雜的數(shù)據(jù)結構和空間分布,本文給大家介紹了使用Vue3和Plotly.js打造一個3D圖在線展示的實現(xiàn)步驟,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-07-07
vue中子組件向父組件傳遞數(shù)據(jù)的實例代碼(實現(xiàn)加減功能)
這篇文章主要介紹了vue中子組件向父組件傳遞數(shù)據(jù)的實例代碼(實現(xiàn)加減功能) ,需要的朋友可以參考下2018-04-04
VueCLI通過process.env配置環(huán)境變量的實現(xiàn)
本文主要介紹了VueCLI通過process.env配置環(huán)境變量的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
Vue純前端使用exceljs導出excel文件的完整圖文教程
這篇文章將一步一步為大家詳細介紹一下exceljs插件中的使用,以及如何使用exceljs導出excel文件,感興趣的小伙伴可以跟隨小編一起學習一下2025-03-03

