element日历批量点击
效果图：
有一个小细节 element的日历单元格是固定的84高度
<template>
<div>
<el-row class="rowHeader">
<el-col>
<el-button>正常工作日</el-button>
<el-button type="success" @click="workday">周日加班</el-button>
<el-button type="primary" @click="workrest">周末休息</el-button>
<el-button type="warning" @click="holidayrest"
>节假日休息，其他休息</el-button
>
</el-col>
</el-row>
<el-calendar v-model="elcalendar" id="calendar">
<template slot="dateCell" slot-scope="{ date, data }">
<div>
<div
v-for="(item, index) in calendarData"
:key="index"
@click="handleelcalendar(item)"
>
<div
v-if="
data.day.split('-').slice(1)[0] ==
item.currantTime
.split('-')
.slice(1)
.join('-')
.split('', 2)
.join('')
"
>
<div
v-if="
data.day.split('-').slice(2)[0] ==
item.currantTime
.split('-')
.slice(2)
.join('-')
.split('', 2)
.join('')
"
:class="'li-0'+item.status,"
>
{{ data.day.split("-").slice(2)[0] }}
</div>
</div>
</div>
</div>
</template>
</el-calendar>
</div>
</template>
<script>
export default {
name: "Map",
data() {
return {
elcalendar:'2020-11',
calendarData: [
{ currantTime: "2020-11-01", status: "1" },
{ currantTime: "2020-11-02", status: "1" },
{ currantTime: "2020-11-03", status: "1" },
{ currantTime: "2020-11-04", status: "1" },
{ currantTime: "2020-11-05", status: "1" },
{ currantTime: "2020-11-06", status: "1" },
{ currantTime: "2020-11-07", status: "1" },
{ currantTime: "2020-11-08", status: "1" },
{ currantTime: "2020-11-09", status: "1" },
{ currantTime: "2020-11-10", status: "1" },
{ currantTime: "2020-11-11", status: "1" },
{ currantTime: "2020-11-12", status: "1" },
{ currantTime: "2020-11-13", status: "2" },
{ currantTime: "2020-11-14", status: "1" },
{ currantTime: "2020-11-15", status: "1" },
{ currantTime: "2020-11-16", status: "4" },
{ currantTime: "2020-11-17", status: "1" },
{ currantTime: "2020-11-18", status: "1" },
{ currantTime: "2020-11-19", status: "4" },
{ currantTime: "2020-11-20", status: "1" },
{ currantTime: "2020-11-21", status: "1" },
{ currantTime: "2020-11-22", status: "1" },
{ currantTime: "2020-11-23", status: "2" },
{ currantTime: "2020-11-24", status: "3" },
{ currantTime: "2020-11-25", status: "1" },
{ currantTime: "2020-11-26", status: "1" },
{ currantTime: "2020-11-27", status: "1" },
{ currantTime: "2020-11-28", status: "1" },
{ currantTime: "2020-11-29", status: "1" },
{ currantTime: "2020-11-30", status: "1" },
],
};
},
methods: {
//周日加班
workday() {
this.status = 3;
},
//周末休息
workrest() {
this.status = 2;
},
//节假日休息，其他休息
holidayrest() {
this.status = 4;
},
handleelcalendar(e) {
// this.choose=!this.choose
if (e.status == 4) {
this.$set(e, "status", 1);
return;
}else if(e.status==3){
this.$set(e, "status", 1);
return;
}else if(e.status==2){
this.$set(e, "status", 1);
return
}
this.$set(e, "status", this.status);
},
},
};
</script>
<style>
.rowHeader {
margin-bottom: 20px;
}
.li-01 {
width: 100%;
height: 84px;
line-height: 84px;
text-align: center;
}
.li-02 {
width: 100%;
height: 84px;
line-height: 84px;
text-align: center;
background-color: #1890ff;
}
.li-03 {
width: 100%;
height: 84px;
line-height: 84px;
text-align: center;
background-color: #13ce66;
}
.li-04 {
width: 100%;
height: 84px;
line-height: 84px;
text-align: center;
background-color: #ffdf25;
}
.li-05 {
width: 100%;
height: 84px;
line-height: 84px;
text-align: center;
background-color: rgb(255, 0, 55);
}
</style>
源码可见：https://github.com/zheng-GIN/el-calendar.git
因为上班时间写的略显仓促，还请见谅。
element日历批量点击相关推荐
- vue关于element日历calendar组件上月、今天、下月、日历块点击事件
vue关于element日历calendar组件上月.今天.下月.日历块点击事件 参考 https://blog.csdn.net/qq493820798/article/details/106858 ...
- vue关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
交流qq群:672373393 前端项目公开在码云:https://gitee.com/xiao_yulong/noob-admin-ui 欢迎大家进群讨论! 辰小白小白最近在写日历模板,项目已经用了 ...
- vue学习之关于element日历calendar组件中上月，今天，下月的显示
今天学习写日历的模板,不过element日历组件官方文档提供的资料较少,所以试着写了个简单的,以后再深入学习. 显示效果图: 本月: 上月: 下月: 下方是源码 <template> &l ...
- element table批量删除_element ui 批量删除
//这里做一个事件 checkbox发生改变时触发 修改 删除 data{ return { multipleSelection: [] //返回的是选中的列的数组集合 这里接收用户选中的id 默认放 ...
- 在线心语日历批量生成工具
在线心语日历批量生成工具 在线心语日历批量生成工具 根据鸡汤文随机批量生成全年日历,支持单天或打包全部下载. 如此模板或内容不合适,可联系我们定制开发. 自媒体或微商将会非常有用,可以极大节约每天的作 ...
- element 日历定制化
element 日历定制化 效果图 组件封装 <!-- 使用 --> <calendar :datatime="timeData" @click="da ...
- vue基于element实现批量删除
前言 当数据量庞大时,批量对数据进行操作在后台管理系统中再常见不过了,今天用 vue 基于 element 实现批量删除. 实现思路 实现这个操作的关键就在于表格需要绑定 @selection-cha ...
- element 日历组件应用相关的问题
1.使用element日历组件会自带按钮组,要实现切换时间的时候去获取相关月份的排班数据,但是按钮组并不存在于日历组件中 <el-calendar v-model="value&quo ...
- Element日历区分上个月下个月等按钮和日期点击事件
文章目录 前言 解决办法 给日历中的`tbody`元素添加点击事件: 其他思路 watch监听日历绑定数据变化实现更新数据: 给上个月,下个月,今天三个按钮添加点击事件: 前言 前言:最近做个酒店管理 ...
最新文章
- Springboot 打包时引入外部jar
- 当周期信号的频率趋向无穷时，它将消失
- python while循环语句-谈谈Python中的while循环语句
- asp.net中DropDownList的SelectedIndexChanged触发问题
- 【机器视觉】 dev_update_time算子
- 台电u盘量产工具_简单几步，让U盘起死回生
- dremwere怎样让多个图片并列排放_PPT图片布局不好看？六步教你，看完就会。
- haproxy安装_Haproxy负载mycat集群配置
- Luogu4897 【模板】最小割树
- 延边大学计算机考研经验分享
- 原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
- Unity3D官方案例1-星际航行游戏Space Shooter
- 【算法思想：回溯法】回溯算法入门级详解
- 数字图像处理第三章part2
- vue——实现组织架构图(vue-org-tree)——技能提升
- 设备故障率高的四大原因及对策分析
- 学习资料(1)-学习网站,Linux,Git,博客
- 目标设定使用谷歌Analytics（分析）
- 2019第十届蓝桥杯省赛C/C++B组题解
- 流量分析实战(1⃣️)_2014_11_16