element-ui 自定义日历组件calendar怎么实现？

置顶浮生666

已于 2022-03-14 09:50:21 修改

阅读量4.3k

点赞数 2

分类专栏： element-ui 文章标签： vue 前端框架

于 2021-08-04 11:20:15 首次发布

本文链接：https://blog.csdn.net/qq_43069664/article/details/119377713

版权

element-ui 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

最近做了一个自定义日历组件的功能，主要是对某些日期添加不同的标记，效果图如下：
在这里插入图片描述
话不多说，代码如下，拿去即用：

<template>
  <div>
    <el-col class="dayEL" :span="12">
      <el-calendar style="height: 530px;" v-model="nowdate">
        <template #dateCell="{data}">
          <!--此为作用域插槽，不理解请自行百度
            #dateCell是v-slot:dateCell的缩写
          2.5 slot 语法这样写：slot="dateCell" slot-scope="{date, data}"
          2.6 slot 语法这样写：v-slot:dateCell="{data}"
           -->

          <div style="width:100%;height: 100%;">
            <div v-for="item in arr" :key="item.day">
              <div v-if="data.day.slice(-2) == item.day">
                <img :src="item.icon" alt="" style="width:40px;height:40px">
              </div>
            </div>
            <div class="spandate">{{ data.day.slice(-2)}}</div>
          </div>
        </template>
      </el-calendar>
    </el-col>
  </div>
</template>
<script>
export default {
  name: "calendar",
  data() {
    return {
      arr: [],
      nowdate: new Date(), //指定当前显示的月份。如果 value 未指定，则显示当月
    };
  },
  mounted() {
    this.arr = [
      {
        day: "05",
        icon: "//img.alicdn.com/bao/uploaded/i1/2207316713768/O1CN010W540H1dhn2tB7PRc_!!0-item_pic.jpg_200x200q90.jpg_.webp",
      },
      {
        day: "10",
        icon: "//img.alicdn.com/bao/uploaded/i1/2260399281/TB2xa8ldeSSBuNjy0FlXXbBpVXa_!!2260399281.jpg_200x200q90.jpg_.webp",
      },
    ];
  },
  methods: {},
};
</script>
<style lang="">
</style>