(精华)2020年7月19日 vue element

admin管理员组

文章数量:1794759

(精华)2020年7月19日 vue element

首先在template加如下代码

<el-calendar v-model="日期"> <template slot="dateCell" slot-scope="{date, data}"> <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''"> <div class="calendar-day"> {{ data.day .split('-') .slice(2) .join('-') }}{{ data.isSelected ? '✔️' : ''}} </div> <div v-for="(item, index) in formatSchedule(data)" :key="index" class="subject_info" >{{item.工作内容}}</div> </div> </template> </el-calendar>

监听日历的各种点击事件

mounted() { this.$nextTick(() => { // 点击前一个月 let prevBtn = document.querySelector( ".el-calendar__button-group .el-button-group>button:nth-child(1)" ); prevBtn.addEventListener("click", () => { if (this.Jobdata.部门id == "") { return; } this.GetJobset(); }); }); this.$nextTick(() => { // 点击今天 let prevBtn = document.querySelector( ".el-calendar__button-group .el-button-group>button:nth-child(2)" ); prevBtn.addEventListener("click", () => { if (this.Jobdata.部门id == "") { return; } this.GetJobset(); }); }); this.$nextTick(() => { // 点击后一个月 let prevBtn = document.querySelector( ".el-calendar__button-group .el-button-group>button:last-child" ); prevBtn.addEventListener("click", () => { if (this.Jobdata.部门id == "") { return; } this.GetJobset(); }); }); this.$nextTick(() => { // 点击日历单元格 let prevBtn = document.querySelectorAll(".el-calendar-table__row td"); prevBtn.forEach(element => { element.addEventListener("click", () => { if (this.Jobdata.部门id == "") { return; } this.GetJobset(); }); }); }); },

监听值的变化和日程展示数据

//监听日历点击变化 watch: { 日期: function(newVal, oldVal) { this.Jobdata.日期 = moment(newVal).format("YYYY-MM-DD"); } }, computed: { formatSchedule() { return data => { return this.list.filter(ele => { let time = ele.日期; // 将时间戳转格式 return moment(time).isSame(data.day); // 日历的时间是否和返回数据里的数据一样,返回的是布尔值 }); }; } }

相关函数

/** *获得本月的开始日期和结束日期 */ export function getMonthStartDateAndDateRange(time) { let oneDayLong = 24 * 60 * 60 * 1000; let now = time; let year = now.getFullYear(); let monthStartDate = new Date(year, now.getMonth(), 1); //当前月1号 let nextMonthStartDate = new Date(year, now.getMonth(), 1); //下个月1号 let days = (nextMonthStartDate.getTime() - monthStartDate.getTime()) / oneDayLong; //计算当前月份的天数 let monthEndDate = new Date(year, now.getMonth() + 1, days); let monthRange = [moment(monthStartDate).format("YYYY-MM-DD"), moment(monthEndDate).format("YYYY-MM-DD")]; return monthRange; } GetJobset() { //获取当前日历页面日期区间axio请求后端数据自己替换 Personnel.GetJobcontext( getMonthStartDateAndDateRange(this.日期)[0], getMonthStartDateAndDateRange(this.日期)[1], this.Jobdata.部门id ).then(response => { this.list = response.data.data; }); },

本文标签： 精华Vueelement