在vue中使用elementUI餓了麼框架使用el-calendar日曆組件，實現自定義顯示備忘錄標註

餓了麼官網給的自定義例子是點擊哪一個日期在日期後面加個勾

 

 而咱們想要的是顯示備忘錄，像這樣↓，日曆上直接顯示

 

 這時候咱們要把template裏的代碼改一下

<el-calendar>
			  <!-- 這裏使用的是 2.5 slot 語法，對於新項目請使用 2.6 slot 語法-->
			  <template
			    slot="dateCell"
			    slot-scope="{date, data}">
			    <p> <!--這裏本來有動態綁定的class，去掉-->
			      {{ data.day.split('-').slice(1).join('-') }}<br /> {{dealMyDate(data.day)}}
			    </p>
			  </template>
			</el-calendar>

　　其實當咱們刷新當前頁面，或者點擊日曆上的日期選擇其餘月份，這個el-calendar都會從新渲染一次，slot="dateCell"這個插槽裏的內容會被循環頁面上顯示多少個日期的次數

這時候咱們就能夠去匹配後臺傳回來的日期，而後加上備註，看js代碼

<script> export default { data() { return { resDate: [ {"date":"2019-12-20","content":"放假"}, {"date":"2019-12-26","content":"去交電費"}, {"date":"2019-11-26","content":"去學習vue"} ] } }, methods:{ dealMyDate(v) { console.log(v) let len = this.resDate.length let res = ""
            for(let i=0; i<len; i++){ if(this.resDate[i].date == v) { res = this.resDate[i].content break } } return res } } } </script>

最後就能夠實現咱們想要的樣子