el-calendar自定义内容

记事本，

已于 2024-11-14 18:06:34 修改

阅读量341

点赞数 3

文章标签： elementui

于 2024-07-01 15:20:09 首次发布

本文链接：https://blog.csdn.net/weixin_53495678/article/details/140101945

版权

在这里插入图片描述

 <el-calendar>
          <template #date-cell="{data }">
            <p class="Selected">
              {{ data.day.split('-').slice(2).join('-') }}
            </p>
            <div v-for="(item,index) in datelist" :key="index">
            <div class="data-title" v-if="(item.date).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
              <div class="data-title-item">
                  <div class="data-title-text">总里程(km)</div>
                  <div class="data-title-num">{{ item.km }}</div>
              </div>
              <div class="data-title-item">
                  <div class="data-title-text">运行时长(H)</div>
                  <div class="data-title-num">{{ item.h }}</div>
              </div>
              <div class="data-title-item">
                  <div v-if="status==0" class="data-title-text">总耗油量(L)</div>
                  <div v-else class="data-title-text">耗电量(kw/h)</div>
                  <div class="data-title-num">{{ item.l }}</div>
              </div>
            </div>
            </div>
          </template>
        </el-calendar>
        <script  setup lang="ts">
        const datelist = ref([
				  {
				    date:'01',
				    km:155.3,
				    h:23.9,
				    l:27.1
				  },
				  {
				    date:'02',
				    km:155.4,
				    h:24.9,
				    l:27.2
				  },
				  {
				    date:'03',
				    km:155.5,
				    h:25.9,
				    l:27.3
				  },
				  {
				    date:'04',
				    km:155.6,
				    h:26.9,
				    l:27.4
				  },
				  {
				    date:'05',
				    km:155.7,
				    h:27.9,
				    l:27.5
				  },
				  {
				    date:'06',
				    km:155.8,
				    h:28.9,
				    l:27.6
				  },
				  {
				    date:'07',
				    km:155.3,
				    h:23.9,
				    l:27.1
				  },
				  {
				    date:'08',
				    km:155.4,
				    h:24.9,
				    l:27.2
				  },
				  {
				    date:'09',
				    km:155.5,
				    h:25.9,
				    l:27.3
				  },
				  {
				    date:'10',
				    km:155.6,
				    h:26.9,
				    l:27.4
				  },
				  {
				    date:'11',
				    km:155.7,
				    h:27.9,
				    l:27.5
				  },
				  {
				    date:'12',
				    km:155.8,
				    h:28.9,
				    l:27.6
				  },
				  {
				    date:'13',
				    km:155.3,
				    h:23.9,
				    l:27.1
				  },
				  {
				    date:'14',
				    km:155.4,
				    h:24.9,
				    l:27.2
				  },
				  {
				    date:'15',
				    km:155.5,
				    h:25.9,
				    l:27.3
				  },
				  {
				    date:'16',
				    km:155.6,
				    h:26.9,
				    l:27.4
				  },
				  {
				    date:'17',
				    km:155.7,
				    h:27.9,
				    l:27.5
				  },
				  {
				    date:'18',
				    km:155.8,
				    h:28.9,
				    l:27.6
				  },
				  {
				    date:'19',
				    km:155.3,
				    h:23.9,
				    l:27.1
				  },
				  {
				    date:'20',
				    km:155.4,
				    h:24.9,
				    l:27.2
				  },
				  {
				    date:'21',
				    km:155.5,
				    h:25.9,
				    l:27.3
				  },
				  {
				    date:'22',
				    km:155.6,
				    h:26.9,
				    l:27.4
				  },
				  {
				    date:'23',
				    km:155.7,
				    h:27.9,
				    l:27.5
				  },
				  {
				    date:'24',
				    km:155.8,
				    h:28.9,
				    l:27.6
				  },
				  {
				    date:'25',
				    km:155.3,
				    h:23.9,
				    l:27.1
				  },
				  {
				    date:'26',
				    km:155.4,
				    h:24.9,
				    l:27.2
				  },
				  {
				    date:'27',
				    km:155.5,
				    h:25.9,
				    l:27.3
				  },
				  {
				    date:'28',
				    km:155.6,
				    h:26.9,
				    l:27.4
				  },
				  {
				    date:'29',
				    km:155.7,
				    h:27.9,
				    l:27.5
				  },
				  {
				    date:'30',
				    km:155.8,
				    h:28.9,
				    l:27.6
				  },
				  {
				    date:'31',
				    km:165.8,
				    h:30.9,
				    l:30.6
				  },
				]);
        </script>