草庐IT

修改element-ui源码给el-dialog添加全屏功能

背景:el-dialog组件提供了fullscreen功能,但是无法满足业务需求。系统使用了许多dialog,不方便重新封装dialog组件,故直接对源码进行修改。1.克隆element官方的仓库到本地gitclonehttps://github.com/ElemeFE/element2.下载到本地之后进入项目,安装依赖包cdelementnpminstall3.打开package文件夹,修改源代码打开package/dialog/src/component.vuetemplate::class="['el-dialog',{'is-fullscreen':isFullscreen,'el-d

修改element-ui源码给el-dialog添加全屏功能

背景:el-dialog组件提供了fullscreen功能,但是无法满足业务需求。系统使用了许多dialog,不方便重新封装dialog组件,故直接对源码进行修改。1.克隆element官方的仓库到本地gitclonehttps://github.com/ElemeFE/element2.下载到本地之后进入项目,安装依赖包cdelementnpminstall3.打开package文件夹,修改源代码打开package/dialog/src/component.vuetemplate::class="['el-dialog',{'is-fullscreen':isFullscreen,'el-d

【element】el-autocomplete的常见用法

前言:这段时间突然发现很少写博客了,平时都在平衡工作和休息的时间,周末也没动过笔,而且更重要的是我找不到写的内容了,在经历的初始的新知识的学习阶段后,目前的阶段更加转入对于业务的理解,很多模块在不同项目中都是可以复用的。而且工作中发现开发并不强求特别酷炫的界面效果,更多的是实用的数据展示,因此button,form,table可以说是最常用的,因此后面可能会用更多的篇幅去说这块内容的知识。一、组件介绍autocomplete是input组件的一个分支,专门用来处理模糊匹配的相关知识,很多时候用户希望输入一个单词就可以自动匹配到相关的内容,这时候就是这个组件发挥作用的地方了。在这里也能看到官网的

【element】el-autocomplete的常见用法

前言:这段时间突然发现很少写博客了,平时都在平衡工作和休息的时间,周末也没动过笔,而且更重要的是我找不到写的内容了,在经历的初始的新知识的学习阶段后,目前的阶段更加转入对于业务的理解,很多模块在不同项目中都是可以复用的。而且工作中发现开发并不强求特别酷炫的界面效果,更多的是实用的数据展示,因此button,form,table可以说是最常用的,因此后面可能会用更多的篇幅去说这块内容的知识。一、组件介绍autocomplete是input组件的一个分支,专门用来处理模糊匹配的相关知识,很多时候用户希望输入一个单词就可以自动匹配到相关的内容,这时候就是这个组件发挥作用的地方了。在这里也能看到官网的

el-cascader 动态加载+默认值

刚解决了这个问题,趁热赶快拿出来凉凉,明天早上起来估计会忘下拉框的选择和默认值对于我来说一直都是个让人头疼的事,倒不是有多么难,而是很繁琐。要保证有值,还要有显示的文字。表单提交后,再回过头编辑还要显示出来选择的项。进入正题吧,我看别人写的文章也非常讨厌巴拉巴拉一堆没用的。首先el-cascader最常用的是显示省市区,所有省市区三四千项一下子加载出来总会有个卡顿的过程,所以我一般用动态加载,这个element的文档和例子很清楚了。这是我代码中的一部分,尽可能的去掉了多余的代码el-cascaderref="areas"v-model="address.area_ids":options="o

el-cascader 动态加载+默认值

刚解决了这个问题,趁热赶快拿出来凉凉,明天早上起来估计会忘下拉框的选择和默认值对于我来说一直都是个让人头疼的事,倒不是有多么难,而是很繁琐。要保证有值,还要有显示的文字。表单提交后,再回过头编辑还要显示出来选择的项。进入正题吧,我看别人写的文章也非常讨厌巴拉巴拉一堆没用的。首先el-cascader最常用的是显示省市区,所有省市区三四千项一下子加载出来总会有个卡顿的过程,所以我一般用动态加载,这个element的文档和例子很清楚了。这是我代码中的一部分,尽可能的去掉了多余的代码el-cascaderref="areas"v-model="address.area_ids":options="o

【Element UI】el-upload 踩的坑

1、action上传的地址,接口地址直接在action中写后端地址会出现跨域问题,而且传参数不方便就用http-request指定具体上传方法2、auto-upload是否在选取文件后立即进行上传,默认true在action赋空值,使用http-request指定方法上传时,auto-upload为false3、http-request覆盖默认的上传行为1,可以自定义上传的实现默认的上传方法均失效,获取不到file值需要使用on-change2做上传文件前的处理4、上传文件显示进度条el-progress35、上传.xls,.xlsx文件并显示进度条的实现代码el-dialogref=""ap

【Element UI】el-upload 踩的坑

1、action上传的地址,接口地址直接在action中写后端地址会出现跨域问题,而且传参数不方便就用http-request指定具体上传方法2、auto-upload是否在选取文件后立即进行上传,默认true在action赋空值,使用http-request指定方法上传时,auto-upload为false3、http-request覆盖默认的上传行为1,可以自定义上传的实现默认的上传方法均失效,获取不到file值需要使用on-change2做上传文件前的处理4、上传文件显示进度条el-progress35、上传.xls,.xlsx文件并显示进度条的实现代码el-dialogref=""ap

vue + element-ui 中 el-table 动态生成表头及有必填项

实现效果:需求描述: A模块B模块用户可在“A模块”中新增、编辑、删除、隐藏表头项。在“B模块”中动态显示用户设置好的表头。表头下数据类型有StringNumeric、Date、List四种类型。类型为String、Numeric、Date时为input格式。类型为List时为el-select格式。类型为List时el-select内数据由用户在新增时与规定模块进行关联选择。 实现方法:思路:根据后端接口返回数据实现动态表头后台接口可为“A模块”中的查询全部列表的接口,也可以是后端新写的接口(推荐)。 代码:html中:addRedStar(h,obj,item.isWrited)":lab

vue + element-ui 中 el-table 动态生成表头及有必填项

实现效果:需求描述: A模块B模块用户可在“A模块”中新增、编辑、删除、隐藏表头项。在“B模块”中动态显示用户设置好的表头。表头下数据类型有StringNumeric、Date、List四种类型。类型为String、Numeric、Date时为input格式。类型为List时为el-select格式。类型为List时el-select内数据由用户在新增时与规定模块进行关联选择。 实现方法:思路:根据后端接口返回数据实现动态表头后台接口可为“A模块”中的查询全部列表的接口,也可以是后端新写的接口(推荐)。 代码:html中:addRedStar(h,obj,item.isWrited)":lab