修改elementUI中el-date-picker内置样式

一.编写背景

今天正在日常的需求编写和bug调试中，产品提出了这样一个需求。为了满足用户在新增数据时的便捷准确，时间选择格式为“年月日时”，即用户不需要选择分合秒，换句话说就是下图中红色框的两项不需要。

二.问题分析。

当时了解到产品的需求时，第一时间还不知道思路怎么做。因为在日常的“板砖模式”开发中，我都习惯了elementUI的代码粘贴，找了以下el-date-picker的配置项也没发现省略这两项的配（可能是我找的不太仔细z_z）。最后能想到的就是样式穿透来对这两项进行隐藏。

三.问题解决。

F12弹出控制台审查了一下元素，找到分秒所在元素位置。

但是想要穿透样式来修改，项目中所有用到该组件的datetime-picker都会被改动，所以需要给当前的时间选择弹出层加一个仅有的类名来修改。elementUI官方文档给出了popper-class这么一个属性用来给弹出框加类名。

找到对应类名下的对分秒两项进行隐藏(隐藏方式不唯一)，我这里选择对时这一项设置宽度为100%就好了。

这时刷新页面就可以看到分秒两列被隐藏了，但是为了让时间显示更良好，在选中日期后的展示效果也要精确到时，配置format="yyyy-MM-dd HH"以及value-format="yyyy-MM-dd HH"。修改效果如下图所示：

四.总结。

1.给el-date-picker组件弹出框加上popper-class属性自定义类名；

2.审查元素找到对应的元素为其修改样式；

3.再做一些相关联反应的配置。

另外，我的项目所用的是avue框架，如果el-date-time组件是avue中option里的配置项，建议将该配置换成插槽用模板的形式来写，写到插槽里后，步骤和上面一致。

新人发文，欢迎各位大佬指正。

修改elementUI中el-date-picker内置样式相关推荐

elementUI表格table的列内置样式修改方法/对比template，列属性class-name，table属性cell-class-name
1,table属性cell-class-name的使用可以作用到某一行,或者某一列等等.但是在style标签中要去掉scoped,不然无效. (在elementUI中,row-class-name ...
修改Element-ui中tree组件最底层节点的样式
最近在项目中,设计将tree组件里最底层的节点布局设计成了多列,那要怎么实现呢? 首先用自定义节点的方式渲染节点,在渲染方法里给最底层节点添加class renderContent(h, { node ...
我的世界1.7.2服务器内置修改器,我的世界1.7.2中配光影、内置修改器等MOD整合包...
<我的世界1.7.2中配光影.内置修改器等MOD整合包>着重于让玩家去探索交互创造并且改变一个由一立方米大小的方块动态生成的地图.除了方块以外环境功能还有植物.生物与物品.游戏里的一些活动 ...
python中的作用域以及内置函数globals()-全局变量、locals()-局部变量
在python中,函数会创建一个自己的作用域,也称为为命名空间.这意味着在函数内部访问某个变量时,函数会优先在自己的命名空间中寻找. 通过内置函数globals()返回的是python解释器能知道的变 ...
Android获取手机中外置内存卡、内置内存卡、手机内存路径
http://www.open-open.com/code/view/1433585940578 首先内部存储路径为/data/data/youPackageName/,下面讲解的各路径都是基于你自己 ...
修改element内置样式-包含行内样式
关于修改element内置样式首先自定义class,列如:<div class="main">element的内容</div> 第1种.main > ...
计算机应用样式指什么,Word 2013中样式的认识与内置样式的使用方法——想象力电脑应用...
通过前面内容的介绍和学习,相信大家对Word 2013的基础操作技能技巧已经有所了解.接下来的日子里,我们开始介绍Word 2013强大的文本自动化处理功能.学会了这些功能的操作技能, 我们的办公效率 ...
python中的json函数_python中装饰器、内置函数、json的详解
装饰器装饰器本质上是一个Python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象. 先看简单例子: def run(): time.sleep(1 ...
Python中匿名函数与内置高阶函数详解
大家好,从今天起早起Python将持续更新由小甜同学从初学者的角度学习Python的笔记,其特点就是全文大多由新手易理解的代码与注释及动态演示 .刚入门的读者千万不要错过! 很多人学习pyt ...
关于在MathType中内置样式的一些小知识
2019独角兽企业重金招聘Python工程师标准>>> MathType提供了七个内置公式样式,如果您对软件默认的样式不满意,可以尝试使用这些内置样式.具体操作方法是:打开MathT ...

修改elementUI中el-date-picker内置样式

修改elementUI中el-date-picker内置样式相关推荐

最新文章

热门文章