element 日历组件-自定义内容

这只是个子组件

<template><div ref="topBox" class="swiper-in page-container bg-white"><div class="w-full page-head">我的排班<i class="close-btn el-icon-close" @click="closeCurrentPage"></i></div><div class="page-body"><div class="topbox"><span style="color: #66b1ff">月份：</span><el-date-picker v-model="day" value-format="yyyy-MM" type="month"  placeholder="选择月" style="margin-right: 1rem; overflow: inherit" :clearable="false"  ></el-date-picker><span style="color: #66b1ff">排班性质：</span><el-select v-model="typesettingNypevalue" placeholder="请选择"  style="margin-right: 1rem; display: inline-flex"  clearable ><el-option  v-for="item in typesettingType" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" ></el-option></el-select><el-button type="primary" @click="getlist">查询</el-button><el-button type="primary" @click="clearlist">刷新</el-button></div><!-- 我的日历 --><div><el-calendar v-model="day" id="calendar"><!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--><template slot="dateCell" slot-scope="{ date, data }"><!--自定义内容--><div><div class="calendar-day"><span class="everyDay">{{  data.day.split("-").slice(2).join("-") }}</span><div  v-for="item in daylist" :key="item.yysj"  @dblclick="calendarOnClick(item)" style="overflow: auto" ><div  class="is-selected" v-if="item.yysj.indexOf(data.day) != -1" style="background: #e5ffff; margin: 5px" ><p>普通：({{ item.p.num }} / {{ item.p.sum }})</p><p>专家：({{ item.z.num }} / {{ item.z.sum }})</p><p>特需：({{ item.t.num }} / {{ item.t.sum }})</p></div></div></div></div></template></el-calendar></div></div></div>
</template>

<script>
import { pbInfo } from "@/api/systemDiagnosisApi/index";
export default {components: {},data() {return {day: new Date(), // 日期typesettingNypevalue: "",// 排班类型typesettingType: [{value: "1",label: "普通排班",},{value: "2",label: "专家排班",},{value: "3",label: "特需排班",},],daylist: [],};},created() {this.getApp();this.$nextTick(() => {// 点击前一个月let prevBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(1)");prevBtn.addEventListener("click", (e) => {this.getApp();});//点击下一个月let nextBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(3)");nextBtn.addEventListener("click", () => {this.getApp();});//点击今天let todayBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(2)");todayBtn.addEventListener("click", () => {this.getApp();});});},methods: {getApp() {//通过接口获取某月某日中的未完成任务，已完成任务，今日任务var aa = "";if (this.day != null && this.day != "") {var year = this.day.getFullYear();var day = this.day.getDate();var month = this.day.getMonth() + 1;if (month < 10) {month = "0" + month;}if (day < 10) {day = "0" + day;}aa = year + "-" + month + "-" + day;}this.listinfo(aa);},listinfo(val) {pbInfo({month: val,schedulingNature: this.typesettingNypevalue,}).then((res) => {this.daylist = res.data;}).catch((err) => {console.log(err);});},getlist() {this.listinfo(this.day);},clearlist() {(this.day = new Date()), // 日期(this.typesettingNypevalue = ""),this.getApp();},//点击日期块calendarOnClick(e) {this.$store.commit("pushcode", e);this.openChildPage(0.7, "mytypesetting", true, true);},closeCurrentPage() {this.$router.go(-1);this.$store.commit("closeInitPage");},},
};
</script>

<style scoped>
.topbox {margin: 1rem;
}
.calendar-day {text-align: center;color: #202535;font-size: 0.75rem;height: 100%;
}
.is-selected {padding-top: 5px;
}
.calendarbox::-webkit-scrollbar {/*滚动条整体样式*/width: 5px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px;
}
.calendarbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #4989ff;
}
.calendarbox::-webkit-scrollbar-track {/*滚动条里面轨道*//* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */border-radius: 10px;background: #ffffff;
}
/deep/ .el-calendar-table thead {text-align: center;
}
/deep/ .el-calendar__body {padding: 10px 12px;
}
/deep/ .el-calendar-table .el-calendar-day {box-sizing: border-box;padding: 8px;height: 115px;
}
.page-body {overflow: none;
}#calendar.el-button-group> .el-button:not(:first-child):not(:last-child):after {content: "当月";
}
</style>

element 日历组件-自定义内容相关推荐

element 日历组件应用相关的问题
1.使用element日历组件会自带按钮组,要实现切换时间的时候去获取相关月份的排班数据,但是按钮组并不存在于日历组件中 <el-calendar v-model="value&quo ...
element日历组件只显示月和日，把年份隐藏掉
官网上显示的日历, 我们要做的是,把年份和旁边的两个小标志小标去掉, 也就是把这红色框框内的内容隐藏掉我们先用控制台看看里面具体的样式我们可以看到 class ="el-date-pic ...
element el-autocomplete组件自定义传参的解决方法
今天在ie浏览器上出现的问题谷歌浏览器是没有问题的,但是ie浏览器上就会调用两次相同接口 <el-autocomplete v-model="state" :fetch-s ...
element表格组件，内容自动滚动（并可设置）
最近项目有个需求,两个表格,定时自动切换,而且每个表格内容自动滚动,还要加个设置功能,可以设置两个表格之前自动切换的间隔时间,和滚动速度,大概效果如下话不多说,直接上代码主要的功能方法 autoR ...
vue学习之关于element日历calendar组件中上月，今天，下月的显示
今天学习写日历的模板,不过element日历组件官方文档提供的资料较少,所以试着写了个简单的,以后再深入学习. 显示效果图: 本月: 上月: 下月: 下方是源码 <template> &l ...
vue关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
交流qq群:672373393 前端项目公开在码云:https://gitee.com/xiao_yulong/noob-admin-ui 欢迎大家进群讨论! 辰小白小白最近在写日历模板,项目已经用了 ...
记：使用IScroll.js 开发picker日历组件遇到的问题及经验总结
IScroll中文文档第一个问题: 边界留白就是这种,上边界(最小),下边界(最大)有两个列表的位置是不能选择的.解决的办法是: 在HTML中,添加空白节点就行了. 第二个问题:初始化之后的滚动停 ...
饿了么 (Element)的日历(Calendar)组件自定义
笔记由于本人用vue+elementui 写了一个关于日历的项目需求是每个日期对应不同的价格并且点击两次之后取其区间的值并计算出总价后来翻了很多资料才找到一些思路 (由于在饿了么ui的日历组件库 ...
自定义vue3.0日历组件
一.前言别人的东西用起来总是那么的不顺手,UI库的日历组件竟然不返回星期几,完全无法忍受,于是自己动手写了一个日历组件. 自己写的东西,那就是想怎么搞就怎么搞,哈哈哈哈哈. 二.代码我使用的nav ...

element 日历组件-自定义内容

这只是个子组件

element 日历组件-自定义内容相关推荐

最新文章

热门文章