草庐IT

jasper-el

全部标签

el-date-picker实现通过其他方式触发日期选择器

el-date-picker目前只能通过点击input输入框触发日期选择器,项目中需要通过其他方式触发日期选择器同时把input输入框去掉,如点击另一个按钮事件来触发日期选择器框展开。该模块由于后端接口数据传输限制在前面文章里做了些许改动。需求左右切换可以快速找到年份,于是添加了element选择年份的日期组件。图中隐藏了el-data-picker日期组件,手动添加样式展示时间栏选择的数据进行+0回显。点击时间时,让日期组件显示出来时存在一个问题就是每次点击需要点击两下才能完成年份的选择。第一次是让组件显示第二次点击是触发日期框选择器于是查询了相关文档,可以通过focus来触发日期选择框。如

使用el-upload组件实现递归多文件上传

一、需求描述:在页面上点击按钮弹出选择电脑文件的界面,可以一次性选择多个文件一起上传到服务器上,并把上传成功的文件展示在页面上。·二、问题阐述:el-upload是支持多文件上传的,但是是同步进行的,你点击上传按钮,选择了多个文件后点击确定,会同时调用上传文件的接口,这样很容易导致服务器奔溃,导致接口报错。·三、解决方法:为了解决这一难题,本文采用递归的方法来实现精准上传文件。·四、实现思路:递归上传是指:你选择了n个文件点击确定后,第一个接口上传成功或者失败后,再调用第二个接口上传第二个文件,依次等待上传完所有文件,这样做法可以大大减轻服务器的压力,就是上传时间会比较长。上传效果请看下方动态

使用el-upload组件实现递归多文件上传

一、需求描述:在页面上点击按钮弹出选择电脑文件的界面,可以一次性选择多个文件一起上传到服务器上,并把上传成功的文件展示在页面上。·二、问题阐述:el-upload是支持多文件上传的,但是是同步进行的,你点击上传按钮,选择了多个文件后点击确定,会同时调用上传文件的接口,这样很容易导致服务器奔溃,导致接口报错。·三、解决方法:为了解决这一难题,本文采用递归的方法来实现精准上传文件。·四、实现思路:递归上传是指:你选择了n个文件点击确定后,第一个接口上传成功或者失败后,再调用第二个接口上传第二个文件,依次等待上传完所有文件,这样做法可以大大减轻服务器的压力,就是上传时间会比较长。上传效果请看下方动态

【element-ui】 el-table 表格动态合并相同数据单元格最全教程,可指定列+自定义合并条件,附完整代码

el-table合并单元格1.固定合并官方挺提供的合并具体某行列的方法:el-table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。template>div>el-table:data="tableData":span-method="arraySpanMethod"borders

【element-ui】 el-table 表格动态合并相同数据单元格最全教程,可指定列+自定义合并条件,附完整代码

el-table合并单元格1.固定合并官方挺提供的合并具体某行列的方法:el-table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。template>div>el-table:data="tableData":span-method="arraySpanMethod"borders

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组件的一个分支,专门用来处理模糊匹配的相关知识,很多时候用户希望输入一个单词就可以自动匹配到相关的内容,这时候就是这个组件发挥作用的地方了。在这里也能看到官网的