elementUI calendar日历事例

标记日历

<template><div class='outer'><el-calendar v-model="value"><template slot="dateCell" slot-scope="{date, data}"><!-- {{data.type}} --><!-- {{data.isSelected}} --><!-- {{data.day}} --><p :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}</p><!-- 根据自定义方法返回值，来确认是否显示选中蓝色线条 --><div v-if="dayCurrent(data.day)" class="blueLine"></div><div v-else class="whiteLine"></div></template></el-calendar></div>
</template>
<script>
export default {name: '',components: {},data () {return {value: new Date(),dayList: ['2020-09-17', '2020-09-18', '2020-09-19', '2020-09-20']}},methods: {dayCurrent (val) {console.log(this.dayList.indexOf(val))if (this.dayList.indexOf(val) !== -1) {return true} else {return false}}}
}
</script>
<style lang='less' scoped>
.blueLine{height:5px; background-color: #7fbeff;
}
.whiteLine{height:5px; background-color: #fff;
}
</style>

elementUI calendar日历事例相关推荐

element-ui Calendar 日历渲染自定义文案
element-ui Calendar 官网链接官网的只有一个基础的日历展示,但是提供了插槽,使得我们可以自定义日历单元格 dateCell scoped slot 参数参数说明类型 date ...
element-ui calendar 日历控件实现编辑假期功能以及样式修改
效果图: 1.日历控件html <template><div class="la-container"><la-pagetitle title=&qu ...
监听element-ui的Calendar 日历组件的上一月今天下一月
监听element-ui的Calendar 日历组件的上一月今天下一月直接在mounted(){}里面进行监听代码如下: mounted() {let prevBtn = document.q ...
element-ui组件库中Calendar日历组件使用心得（可能用到的常用方法和如何添加监听）
最近接触到一个需求,做一个值班排班表,拿到低保真之后一直在考虑是如何实现这个排班表,考虑过自己写,也考虑过@fullcalendar/vue插件,经过一些评估之后最终选择了项目本身使用的element ...
WPF Calendar 日历控件样式自定义
原文:WPF Calendar 日历控件样式自定义粗略的在代码上做了些注释 blend 生成出来的模版有的时候会生成跟 vs ui界面不兼容的代码会导致可视化设计界面报错崩溃掉但是确不 ...
Java的知识点22——时间处理相关类、Date时间类(java.util.Date)、DateFormat类和SimpleDateFormat类、Calendar日历类
时间处理相关类用long类型的变量来表示时间,获得现在时刻的"时刻数值":long now = System.currentTimeMillis(); Date时间类(java. ...
【Java Calendar日历类】可视化日历程序（控制台输出）
Calendar日历类 Calendar 类是一个抽象类,为我们提供了关于日期计算的相关功能,比如:年.月.日.时.分.秒的展示和计算. GregorianCalendar 是 Calendar 的一 ...
Python calendar日历模块的常用方法
Python calendar日历模块的常用方法如果您想知道某一天是星期几,某个月有多少个周末...那么,日历对您来说非常方便.您的办公桌有制作精美的日历,手机里也有日历,电脑里也有日历,随手可得. ...
Qml控件之Calendar日历
Calendar(日历)控件是基于Qml实现的,它兼容于QtQuick 1.x和QtQuick 2.x.可用于显示日期信息. 1. 演示 2. 例子 import QtQuick 2.0 // Qt4 ...

elementUI calendar日历事例

elementUI calendar日历事例相关推荐

最新文章

热门文章