在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>

最后就可以實現我們想要的樣子