vue日历上每天的日程安排表

最新推荐文章于 2025-04-16 09:00:00 发布

太空漫步11

最新推荐文章于 2025-04-16 09:00:00 发布

阅读量2.9k

点赞数 18

文章标签： vue.js 前端 javascript 日历日程 calendar elementui

本文链接：https://blog.youkuaiyun.com/zhourongxiang1/article/details/137165731

版权

本文介绍了如何在Vue应用中结合vue-calendar-component和ElementUI的table组件，实现点击日历选择日期后动态更新表格数据，展示了两个不同日期范围内的事件列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

结合了vue-calendar-component和Element UI的table组件。

npm install vue-calendar-component  --registry=https://registry.npmmirror.com

点击一天，切换table数据。
在这里插入图片描述

<template>
    <div>
        <div class="con">
            <Calendar v-on:choseDay="clickDay" v-on:changeMonth="changeDate" v-on:isToday="clickToday"></Calendar>
        </div>

        <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="开始时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="enddate"
        label="结束时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="事情"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    </div>
</template>

<script>
/* eslint-disable */
import Calendar from 'vue-calendar-component';
export default {
    components: {
        Calendar
    },
    data() {
        return {
            tableData: []
        };
    },
    created() { },
    methods: {
        clickDay(data) {

            if(data=='2024/3/30'){
                this.tableData=[{
            date: '8:00',
            enddate: '9:00',
            name: '请客',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '9:00',
            enddate: '10:00',
            name: '出差',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '10:00',
            enddate: '11:00',
            name: '给客户打电话',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '11:00',
            enddate: '12:00',
            name: '报销车费',
            address: '上海市普陀区金沙江路 1516 弄'
          }];
            }else{
                this.tableData=[{
            date: '8:00',
            enddate: '9:00',
            name: 'go school',
            address: 'American'
          }, {
            date: '9:00',
            enddate: '10:00',
            name: 'eat food',
            address: 'beijing'
          }, {
            date: '10:00',
            enddate: '11:00',
            name: 'play game',
            address: 'nanjing'
          }, {
            date: '11:00',
            enddate: '12:00',
            name: 'watch tv',
            address: 'shanghai'
          }];
            }
        },
        changeDate(data) {
        },
        clickToday(data) {
        }
    },
};
</script>