做新得网站可以换到原来得域名嘛,南阳做做网站,四大营销策略,自动推广引流app日历组件 Calendar 可以自定义在页面添加内容。
实现效果图
1.由于Calendar没有右上角月份切换的API事件#xff0c;可以给组件源码添加自定义添加一个事件 2.也可以通过自带的input事件来获取日历 3.vue页面完整代码 注释#xff1a;this.$m(this.beginTime).format(…日历组件 Calendar 可以自定义在页面添加内容。
实现效果图
1.由于Calendar没有右上角月份切换的API事件可以给组件源码添加自定义添加一个事件 2.也可以通过自带的input事件来获取日历 3.vue页面完整代码 注释this.$m(this.beginTime).format(‘YYYY-MM-DD HH:mm’)是分装的标准时间转化年月日使用者可通过多种方法自定义处理。
templatediv!-- 日历组件 --el-calendar:eventstableData:date-formatyyyy-MM-dd:time-formattrue:time-区间步长30date-changegetDateChangestyleheight:95%;overflow:scrolltemplateslotdateCellslot-scope{date, data}p :classdateFormatter(date){{ data.day.split(-).slice(1).join(-) }}/pdiv v-ifresult[$m(date).format(YYYY-MM-DD)] classchockInp v-ifresult[$m(date).format(YYYY-MM-DD)].length 2上班{{ result[$m(date).format(YYYY-MM-DD)][result[$m(date).format(YYYY-MM-DD)].length-1].checkInTime }}/p p v-ifresult[$m(date).format(YYYY-MM-DD)].length 2 stylemargin-top:5px;下班{{ result[$m(date).format(YYYY-MM-DD)][0].checkInTime }}/p el-popoverplacementbottomwidth540max-width540triggerclickv-ifresult[$m(date).format(YYYY-MM-DD)].length 2el-table :dataresult[$m(date).format(YYYY-MM-DD)]el-table-column aligncenter typeindex width60 label序号/el-table-columnel-table-column propclockTime alignleft label打卡时间 width180template slot-scopescope{{ $m(scope.row.clockTime).format(YYYY-MM-DD HH:mm) }}/template/el-table-columnel-table-column width300 propertysite label地址 show-overflow-tooltip/el-table-column/el-tablep classnavMore slotreference展示更多/p /el-popover/divp classabsenceFromDuty v-if($m(new Date()).format(YYYY-MM-DD) $m(date).format(YYYY-MM-DD))span v-if!result[$m(date).format(YYYY-MM-DD)] || result[$m(date).format(YYYY-MM-DD)].length 2{{dateFormatterText(date)}}/span/p /template /el-calendar/div
/templatescriptexport default {data() {return {beginTime: ,endTime: ,newDate:,nowDate:,result:{},value: new Date(), // 当前日期}},created(){// 获取当前月第一天this.beginTime this.$m().firstDay();this.beginTime this.$m(this.beginTime).format(YYYY-MM-DD HH:mm)// 获取当前月最后一天this.endTime this.$m().lastDay();this.endTime this.$m(this.begiendTimenTime).format(YYYY-MM-DD 23:59)},methods: {// 检查日期是否是周末dateFormatterText(date) {const dayOfWeek date.getDay();if (dayOfWeek 0 || dayOfWeek 6) { // 0 是星期日6 是星期六return ; }return 缺勤;},// 获取日历数据getDateChange(val){let date val.split(-);date date[0] - date[1];//打卡的年月if(date){// 开始时间let firstDay this.$m(date).firstDay();this.beginTime this.$m(firstDay).format(YYYY-MM-DD HH:mm)// 结束时间let lastDay this.$m(date).lastDay();this.endTime this.$m(lastDay).format(YYYY-MM-DD 23:59)// 获取每个月发月份下的打卡记录this.getClockLogList();}},// 获取打卡记录getClockLogList(){// ...调用接口获取每个月的考勤打卡数据赋值给 this.tableData// this.tableData val;},}
}
/script
style langscss scoped.chockIn{margin-top:10px;}.absenceFromDuty{color: #c06817;margin-top:10px;}.navMore{margin-top:3px;color: #3370ff;}.weekend-highlight {color: #eb3333;}
/style
