Element UI中el-calendar日历的使用及样式修改(年月可下拉选框选择)
项目场景:
以日历形式展现当前页面。其中,年月可进行下拉选择,默认选中当天日期,用户可以自由点选日期,被选中后日期以紫色显示,鼠标在日历上移动时,日期显示出橙色。有数据的日期显示出灰色。
实现思路:删除现存在左上角年月元素,写一个下拉选框,通过css定位到正确位置,通过vue计算属性进行数据绑定
代码实现:
<div class="Calendarselect"><el-date-pickerv-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 UI中el-calendar日历的使用及样式修改(年月可下拉选框选择)相关推荐
- Element UI中el-calendar日历的年月快捷选择(可下拉选框选择)
需求: 以日历形式展现当前页面.其中,年月可进行下拉选择,默认选中当月,用户可以自由点选日期 实现思路:右上角年月元素隐藏掉,写一个下拉选框,通过css定位到正确位置,通过vue计算属性进行数据绑定 ...
- 修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
- laravel 在三级分类下拉选框中默认值
这是一个商品表,记录了商品的分类,分三类,顶级分类.一级分类.二级分类 在编辑修改商品的信息的视图 先得给控制器传递商品的 id ,根据 id 获取商品全部信息,以及获取所有分类信息 然后进行家谱树查 ...
- PB中获得dropdownlistbox下拉选框中选择项的序列号
int selno=ddlb_1.finditem(ddlb_1.text,1) 转载于:https://www.cnblogs.com/wjonjon/archive/2009/11/04/1595 ...
- Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
- Web前端笔记-修改element ui中表格样式(透明、去横纵线等含修改思路)
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题 原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
最新文章
- Python3 使用replace 替换空格无效
- hutool的定时任务不支持依赖注入怎么办_设计一个任务调度算法,时间轮算法,比优先队列更高效...
- npm 包管理器_导演电影解释了节点软件包管理器(NPM)
- MY WAY程序(十八) 团队开发
- js两种生成对象模式(公有成员和成员私有)
- asp.net core2.0中网站发布的时候,怎么样才配置才可以使视图文件不被打包进去?...
- 嗖嗖移动营业大厅(Java面向对象编程)
- 飞鸽原创博客,真正的飞鸽官方博客
- 2022-2028全球造水机市场现状及未来发展趋势
- deep-daze给你一个五彩斑斓的黑
- android xml画斜线,API返回XML引号通过反斜线
- 硬笔书法的产生与兴起
- 苹果屏幕录制怎么没有声音_怎么录制屏幕?有哪些好用的录制屏幕软件
- SLCP认证辅导,SLCPCAFv1.4和v1.3相比较共同之处在哪
- *.axf: Error: L6218E: Undefined symbol xxx(xxx.o)问题解决与inline函数的声明
- PRW 数据集mat 转txt
- Line披露母公司Naver详情:去年营收28.4亿美元
- 论文插图用计算机绘制,论文中插图和表格的绘制种类
- pyecharts0.5.x制作含地图的数据看板
- Halcon 第五章『模板匹配Matching』◆第5节:基于组件的模板匹配|Component-Based
热门文章
- texstudio 使用方法_TeXstudio使用教程解析
- 【原创】西门子S7-1500PLC使用 EPOS控制V90伺服驱动器
- 什么是 pinia 啊?
- 如何使用cmd进入打印机选项_怎么用cmd运行功能添加WiFi打印机?
- python中求余_python中取余
- 使SpringBoot配置文件application.properties支持中文
- 数据分析行业之数据挖掘工程师师和数据研发工程师
- IDEA run as java application和run as Spring boot app
- 现实大于爱情,时间泯灭一切!
- c语言中关于文件读取结束的判定,以及feof函数的理解