Element UI中el-calendar日历的使用及样式修改（年月可下拉选框选择）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI中el-calendar日历的使用及样式修改（年月可下拉选框选择）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

以日历形式展现当前页面。其中，年月可进行下拉选择，默认选中当天日期，用户可以自由点选日期，被选中后日期以紫色显示，鼠标在日历上移动时，日期显示出橙色。有数据的日期显示出灰色。

实现思路：删除现存在左上角年月元素，写一个下拉选框，通过css定位到正确位置，通过vue计算属性进行数据绑定

代码实现：

<div class="Calendarselect">
	<el-date-picker
		v-model="monthValue"
		type="month"
		size="mini"
		style="width：150px"
		@change="changeMonth"
		:clearable="false"
	></el-date-picker>
</div>
<el-calendar v-model="value" style="text-align: center;line-height: 66px;" >
	<template slot="dateCell" slot-scope="{date, data}">
	<div slot="reference" class="div-Calendar" @click="calendarOnClick(date)">
		<p :class="{'is-hasData':SubvactionDate.indexOf(data.day) > -1, }">
		{{ data.day.split('-').slice(2).join('-') }}
		</p>
	</div>
	</template>
</el-calendar>

//月下拉选框
changeMonth(){
	this.value = new Date(this.monthValue);
},
//日历样式修改
removeBtn(){
	this.$el.querySelector('div.el-calendar__title').remove();
},

computed: {
	monthValue: {
		get: function () {
		return this.value
	},
	set: function (newValue) {
		this.value = newValue
	}
},

.Calendarselect{
	top: 61px;
	position: relative;
	text-align: right;
	padding-right: 16px;
 }
 /* 日历表格今天样式 */
.el-backtop,
.el-calendar-table td.is-today {
    color: #7000BD;
}
/* 除去日历表格的padding */
.el-calendar-table .el-calendar-day {
    height: auto;
    padding: 0;
}
 /* 日历表格鼠标滑动样式 */
.el-calendar-table .el-calendar-day:hover {
    background-color: #F26C08 !important;
    color: white;
}
/* 日历表格选择日期样式 */
.el-calendar-table td.is-selected {
    background-color: #7000BD;
    color: white;
}

实现效果：
element calendar,vue.js,elementui,javascript 文章来源地址https://www.toymoban.com/news/detail-553770.html