需求：
以日历形式展现当前页面。其中，年月可进行下拉选择，默认选中当月，用户可以自由点选日期
实现思路：右上角年月元素隐藏掉，写一个下拉选框，通过css定位到正确位置，通过vue计算属性进行数据绑定
实现效果：
实现代码：
<!-- 日历表 -->
<div class="block Calendarselect">
<el-date-picker
v-model="monthValue"
type="month"
size="mini"
style="width：150px"
@change="changeMonth"
:clearable="false"
></el-date-picker>
</div>
<el-calendar style="margin: 5px 10px" v-model="nowdate"
><template #dateCell="{ data }"
><div style="width: 100%; height: 100%">
<div class="spandate">{{ data.day.slice(-2) }}</div>
<div
v-for="item in arrTime"
:key="item.date"
class="calendar-count"
>
<div v-if="data.day == item.date">
<span> {{ item.count }} </span>
</div>
</div>
</div></template
></el-calendar>
computed: {
monthValue: {
get: function () {
return this.nowdate;
},
set: function (newValue) {
this.nowdate = newValue;
},
},
},
methods方法
//月下拉选框
changeMonth() {
this.nowdate = new Date(this.nowdate);
},
选择框样式：
.Calendarselect {
top: 22px;
position: relative;
text-align: right;
left: 46%;
}
//去掉日历中自带的年月按钮
.el-button-group {
display: none !important;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79226.html
