草庐IT

el-submenu

全部标签

el-input无法输入的问题和表单验证失败问题

1.el-input无法输入的问题原因1、el-input组件没有绑定双向响应式数据(v-model)解决方案:在data中定义一个变量,然后在el-input组件中使用v-model进行双向数据绑定,这样子就会解决el-input组件无法输入的问题了。原因2、组件嵌套太深还是该组件是一个坑(具体原因不清楚,只知道解决方法)这时,你会发现我们进行了双向数据绑定了,但是el-input还是无法输入,我们就要使用绑定input事件,然后使用$forceUpdate方法强制刷新,这样子会解决我们el-input无法输入问题,但是这会带出一个新的问题,那就是表单无法进行验证等一些问题。解决方法的步骤1

el-input无法输入的问题和表单验证失败问题

1.el-input无法输入的问题原因1、el-input组件没有绑定双向响应式数据(v-model)解决方案:在data中定义一个变量,然后在el-input组件中使用v-model进行双向数据绑定,这样子就会解决el-input组件无法输入的问题了。原因2、组件嵌套太深还是该组件是一个坑(具体原因不清楚,只知道解决方法)这时,你会发现我们进行了双向数据绑定了,但是el-input还是无法输入,我们就要使用绑定input事件,然后使用$forceUpdate方法强制刷新,这样子会解决我们el-input无法输入问题,但是这会带出一个新的问题,那就是表单无法进行验证等一些问题。解决方法的步骤1

修改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