element日历组件渲染事件

最新推荐文章于 2025-04-28 15:11:19 发布

ZhengDaHui360

最新推荐文章于 2025-04-28 15:11:19 发布

阅读量1.3k

点赞数 1

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/ZhengDaHui360/article/details/123315667

版权

1.效果图

2.完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <!-- 卡片区域 -->
        <el-card style="padding:20px;margin:90px;">
            <!-- 日历区域 -->
            <el-calendar>
                <template slot="dateCell" slot-scope="{date, data}">
                    {{ data.day.split('-').slice(1).join('-') }}
                    <!-- 日历单元区域 -->
                    <!-- 使用for循环读取后台数组对象wokeDatas-->
                    <div style="width: 100%;" v-for="item in wokeDatas" :key="item.id">
                        <!-- 根据时间来条件渲染出事件 -->
                        <el-tag style="margin-top:10px;" v-if="(item.jiaofushijian).indexOf(data.day)!=-1">
                            {{item.xiangmumingcheng}}-{{item.xiangmujingli}}
                        </el-tag>
                    </div>
                </template>
            </el-calendar>
        </el-card>
    </div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                wokeDatas: []
            }
        },
        created() {
            this.workItem()
        },
        methods: {
            async workItem() {
                const url='http://localhost:999/magicflu'
                const params={
                    recordId: 'http://localhost:999/magicflu'
                }
                const {data:res} = await axios.get(url,params)
                if(res.meta.status !==201) {
                  return this.$message.error("获取数据失败")
                }
                this.wokeDatas = res.entry
            }
        },
    })
</script>

</html>