element Calendar 日历
文章描述：
element Calendar日历使用以及自定义日历中事件文字
“element-ui”: “2.15.12”,
“vue”: “2.7.13”,
基础
<template>
<el-calendar v-model="value">
</el-calendar>
</template>
<script>
export default {
data() {
return {
value: '2023-08-01' //new Date()
}
},
created() {
console.log(new Date())
}
}
</script>
日历中显示格式
{{ data.day.split('-').slice(0).join('-') }}（年-月-日）2023-08-01
{{ data.day.split('-').slice(1).join('-') }}（月-日）08-01
{{ data.day.split('-').slice(2).join('-') }}（日）1
案例
<template>
<el-calendar v-model="value">
<template
slot="dateCell"
slot-scope="{date, data}">
<p :class="data.isSelected ? 'is-selected' : ''">
{{ data.day.split('-').slice(2).join('-') }}
<!-- {{ data.isSelected ? '✔️' : ''}} -->
<div v-for="(item, index) in formatSchedule(data)" :key="index">
<!-- {{item.result}} -->
<div v-for="(itemx,i) in item.list" @click="click(itemx)">
{{itemx}} - demo
</div>
</div>
</p>
</template>
</el-calendar>
</template>
<script>
export default {
computed: {
//将返回数据里的时间与日历控件里的时间匹配，将数据回显在对应的位置上
//数据的时间格式： riqi:"2021-06-05" --- yyyy-MM-dd；
//如果后端返回的时间不是yyyy-MM-dd，要转格式再匹配
formatSchedule() {
return (data) => {
// data {isSelected: false, type: 'prev-month', day: '2023-07-31'}
return this.tradeData.filter(f=>f.riqi.includes(data.day))
};
},
},
data() {
return {
value: '2023-08-03' ,//new Date()
tradeData:[
{
result: "正常",
riqi: "2023-08-02",
list:[1,2,3,4]
}
]
}
},
created() {
console.log(new Date())
},
methods:{
click(e){
console.log(e)
}
}
}
</script>
<style>
.is-selected {
color: #1989FA;
}
.el-calendar-table .el-calendar-day {
height: auto;
}
</style>
点击日期不跳转但可以有点击方法
@click.stop阻止事件冒泡
使不是本月日期不可点击，也不会进行跳转
.el-calendar-table:not(.is-range) td.prev, .el-calendar-table:not(.is-range) td.next{
pointer-events: none;
}
发布时间：2023/08/01
发表评论