element UI框架使用el-calendar日历组件自定义内容

效果图

找到了两种实现方式 第二种比较简单 所以就直接更新第二种了

templete部分：

<el-calendar>
              <template
                 v-model="timeValue"
                slot="dateCell"
                slot-scope="{date, data}">
                <p> <!--这里原本有动态绑定的class，去掉-->
                  {{ data.day.split('-').slice(2).join('-') }}<br /> 
                    <span style="color:red;">{{my_date(data.day)}}</span>
                </p>
              </template>
            </el-calendar>

data部分：

data: function () {
     return {
        res_date: [
            {"date":"2021-11-10","content":"查询成绩"},
            {"date":"2021-11-21","content":"报名考试"},
            {"date":"2021-11-26","content":"生日"}
        ],
        timeValue: "",
    }
}

js部分：

methods:{
 my_date(v) {
        console.log(v)
        let len = this.res_date.length
        let res = ""
        for(let i=0; i<len; i++){
            if(this.res_date[i].date == v) {
                res = this.res_date[i].content
                break
            }
        }
        return res
    },
}

css 样式的话 大家根据自己项目的需求进行设置吧。

另外补充：官网没有给出点击上个月下个月今天的相关触发函数，所以需要我们自己绑定触发函数

绑定上函数之后，需要自定义日历内容的时候 直接调用相关接口就可以

 created() {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", (e) => {
        let d = new Date(this.timeValue);
        console.log(d);
        let resDate = d.getFullYear() + "-" + this.handleTime(d.getMonth() + 1);//2020-10
      });
      //点击下一个月
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", (e) => {
        let d = new Date(this.timeValue);
        let resDate = d.getFullYear() + "-" + this.handleTime(d.getMonth() + 1);//2020-12
      });
      //点击今天
      let todayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      todayBtn.addEventListener("click", (e) => {
        let d = new Date(this.timeValue);
        let resDate = d.getFullYear() + "-" + this.handleTime(d.getMonth() + 1);//2021-11
      });
    });
  },
methods:{
    //处理时间
    handleTime(s) {
      return s < 10 ? "0" + s : s;
    },
}