vue-el-calendar考勤日历

element官网
其实就是官网上的代码，做了一点注释和小改动，这个基础上可以实现行程日历，打卡日历，活动日历等等。基本思想就是 <el-calendar>内你可以放n个<template>,日历放在#header插槽内，额外内容放在#date-cell插槽内。这个额外内容就正常写就行。

数据我只写了几个模拟数据。

<template><div class="Calendarbox"><el-calendar ref="calendar" v-mobel="value"><!-- <template v-slot:header> this父组件，把这段template放在子组件的header插槽里--><!-- 作用域插槽. --><template #header="{ date }"><div class="leftbutton"><el-button size="small" @click="selectDate('prev-year')"><span>&lt&lt</span></el-button><el-button size="small" @click="selectDate('prev-month')"><span>&lt</span></el-button></div><div class="middlebutton"><el-button size="small" @click="selectDate('today')">{{ date }}</el-button></div><div class="rightbutton"><el-button size="small" @click="selectDate('next-month')">&lt</el-button><el-button size="small" @click="selectDate('next-year')">&lt&lt</el-button></div></template><!-- 通过设置名为 date-cell 的 scoped-slot 来自定义日历单元格中显示的内容。 在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。 --><template #date-cell="{ data }"><div style="display: flex;flex-direction: row;"><div>{{ data.day.split("-").slice(2).join("-") }}</div><div v-for="i in kaoqin"><div v-if="data.day.split('-').slice(2)==i.day"><div><span :class="Wcolors.Wcolor(i.state[0])">{{i.state[0]}}</span></div><div><span :class="Wcolors.Wcolor(i.state[1])">{{i.state[1]}}</span></div></div></div></div></template></el-calendar></div>
</template><script setup>
/*** 组件 - 考勤日历（动态加载数据）*/
import { ref } from 'vue';
import { kaoqin } from '../assets/MNdata/KQData.js';
import Wcolors from '../assets/MNdata/KQData.js';
//别名.(方法)const calendar = ref()
const selectDate = (val) => {calendar.value.selectDate(val)
}
</script>

vue-el-calendar考勤日历相关推荐

android 钉钉考勤日历,vue钉钉考勤日历 vue实现钉钉的考勤日历
想了解vue实现钉钉的考勤日历的相关内容吗,张张张立宏在本文为您仔细讲解vue钉钉考勤日历的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue钉钉考勤日历,vue钉钉考勤,vue考勤日历 ...
vue element calendar生成日历
最近,项目上用到element的calendar功能,我看了一下在element官方网站上https://element.eleme.cn/#/zh-CN/component/calendar的解释比 ...
vue vant Calendar组件日历开始时间结束时间的范围控制时间戳标准时间转换获得月份的最后一天
功能: 开始时间范围选择: 最小时间:去年的今天最大时间:当前时间结束时间范围选择: 最小时间:开始时间最大时间: 开始时间月份的最后一天比如:当前时间2021-07-24,开始时间选择范围就 ...
android 钉钉考勤日历,vue实现钉钉的考勤日历
本文实例为大家分享了vue实现钉钉的考勤日历的具体代码,供大家参考,具体内容如下直接上效果图,需要再往下看 GitHub地址:vue-calendar-component 由于需要对此组件的样式及功 ...
考勤日历 ajax,vue实现钉钉的考勤日历
本文实例为大家分享了vue实现钉钉的考勤日历的具体代码,供大家参考,具体内容如下直接上效果图,需要再往下看 GitHub地址:vue-calendar-component 由于需要对此组件的样式及功 ...
vue仿钉钉的考勤日历（基于vue-calendar-component组件）
直接上效果图,需要再往下看 GitHub地址:vue-calendar-component 由于需要对此组件的样式及功能的扩展,直接复制代码过来修改,开始贴代码,很长很长慢慢看 checkCalen ...
calendar vue日期选择组件基于 vue 2.0高性能日历组件（vue2-datepick）
一.点击文本框,选择日期,把日期赋值到文本框中. 二.日期组件使用 1.安装vue2-datepick npm install vue2-datepick --save 2.初始化,在main.js中 ...
Fullcalendar v5.5.1 设计一个考勤日历插件
前言最近公司HR项目新增一个考勤日历需求,发现Fullcalendar插件功能齐全,完美支持JQuery.Vue.React 和 Angular,支持TypeScript,开源,并托管在GitHub ...
javascript考勤日历
简介用过一些开源的日历,但对于自定义去绑定数据在日历元素中却不是很方便,由于工作需要用到考勤日历,考虑到日历的实现也不是特别麻烦,于是自己弄了一个,样式比较简单,需要的可以自己去扩展.使用的时候绑定 ...

vue-el-calendar考勤日历

vue-el-calendar考勤日历相关推荐

最新文章

热门文章