Element——el-calendar 自定义日历

studystudy。。

已于 2024-08-27 10:12:09 修改

阅读量172

点赞数 4

文章标签：前端

于 2024-08-27 10:09:56 首次发布

本文链接：https://blog.csdn.net/weixin_43551242/article/details/141595487

版权

  <el-calendar v-model="value1" @input="handleCalendarChange">
                  <template slot="dateCell" slot-scope="{ date, data }">
                    <div class="list-bottom">
                      执行任务:
                      <div
                        v-for="(item, idx) in riliList"
                        :key="idx"
                        :title="item"
                        class="list-cont"
                      >
                        <span class="list-count">
                          {{
                            getTime(date) == item.yearStr
                              ? item.planDay
                              : ""
                          }}</span
                        >
                        <span
                          v-show="getTime(date) == item.yearStr"
                          class="list-span"
                          v-for="(v, index) in item.planList"
                          :key="index"
                          :title="v"
                        >
                          {{ v }}
                        </span>
                      </div>
                    </div>

                    <!-- </div> -->
                    <div class="day">
                      {{ data.day.split("-").slice(2)[0] }}
                    </div>
                  </template>
                </el-calendar>

import moment from "moment";


data(){
	return{
	      riliList: {},
	      value1: new Date(),
	      Year: "",
	}
}
 methods: {
  //日历
    getData() {
      getCalendar().then((res) => {
        if (res.successful) {
          this.riliList = res.data;
        } else {
          this.$message.error(res.error);
        }
      });
    },
    handleCalendarChange(value) {
      this.Year = moment(value).format("YYYY-MM-DD");
      this.getData();
    },
  },