![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
element ui
文章平均质量分 73
Are杨
这个作者很懒,什么都没留下…
展开
-
一份 ElementUI 问题清单
1、form 下面只有一个 input 时回车键刷新页面原因是触发了表单默认的提交行为,给el-form 加上@submit.native.prevent就行了。<el-form inline @submit.native.prevent> <el-form-item label="订单号"> <el-input v-model="query.orderNo" :placeholder="输入订单号查询" clearable转载 2021-10-23 09:17:07 · 132 阅读 · 0 评论 -
ElementUI常见的问题总结
1、form 下面只有一个 input 时回车键刷新页面原因是触发了表单默认的提交行为,给el-form 加上@submit.native.prevent就行了。<el-form inline @submit.native.prevent> <el-form-item label="订单号"> <el-input v-model="query.orderNo" :placeholder="输入订单号查询" clearable转载 2021-09-17 14:47:35 · 567 阅读 · 0 评论 -
element-ui button防重复点击指令
防止按钮重复点击指令因为手快的同学,再进行按钮操作的时候,会触发多次,若这个点击事件接入API,就会重复请求API。所以为了防止这个问题,我不可能一个按钮去写一个防点击,这多麻烦。所以就写了个指令。下面上代码export default {}.install = (Vue, options = {}) => { Vue.directive('dbClick', { inserted(el, binding) { el.addEventListener('click', e转载 2020-12-02 13:00:32 · 3154 阅读 · 1 评论 -
element ui el-upload上穿多张图片
需求如下:这里是在form表单中做的<el-form-item label="凭证照片" ref="loadElement" prop="picList"> <el-upload action="#" ref="upload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-re原创 2020-10-24 13:54:12 · 1162 阅读 · 1 评论 -
仿element ui实现自定义UI插件
有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强。博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use(),只要import就可以导入进来了,感觉很神奇,细细的发现,原来他们的不同是因为axios里面并没有写install方法,而element-ui就有写这个方法,下面就利用这个install来写一个自己的插件。首先看一原创 2020-10-16 11:35:09 · 534 阅读 · 0 评论 -
vue项目实现每隔一段时间刷新当前页面(轮询)
背景描述:我使用的是vue+element 开发系统,需要一段时间监测数据的变化解决方案:本来想使用websock效果更佳,想到仅仅单页面使用就是用后端缓存数据前端定时请求的方法。使用定时器和延时器的方案首先介绍下定时器和延时器setInterval(function(){}, milliseconds)——会不停的调用函数setTimeout(function(){}, milliseconds)——只执行函数一次乍看之下,setInterval会符合我们的业务需求,然而也需要注意一些坑,原创 2020-10-11 13:16:33 · 6015 阅读 · 1 评论 -
element ui分页常见问题
需求:分页显示数据时当把第二页数据全部删除,要求自动返回第一页 watch:{ total(){ if(this.total==(this.page-1)*this.pageSize&& this.total!=0){ this.page-=1; this.getPostList();//获取列表数据 } } },...原创 2020-09-02 14:35:46 · 439 阅读 · 0 评论 -
element ui el-button按钮防止多次触发单击事件
需求:添加提示,使按钮点击提交数据时,按钮不可以再操作,防止数据重复提交,防止多次触发事件实现思路:添加全局loading让遮罩层后不可点击话不多说上代码 <el-button type="primary" @click="push">提交</el-button>这里提交数据为formdatapush(){ const loadingObj=this.$loading({ lock:true, text:"提交中...",原创 2020-08-12 17:01:20 · 6755 阅读 · 2 评论 -
element ui中el-switch使用的坑
需求说明1、根据后台传值动态显示开关(0为关,1为开)2、对开关进行操作时请求后台,需要传两个参数:id,type需求描述我先说我的需求,我想在列表的每一条添加多个个开关,可以改当前一条数据的状态,并发送到服务端,并根据服务端返回的结果局部刷新当前页数据期望结果状态是后端返回给我的状态,分别是1和2,我先点击switch发送给后端这条数据的id,然后修改这一条数据的状态,而不是重新拿这个列表,如果后端返回失败的情况这个switch不做改变解决方法Swich默认是boolean类型,而后台原创 2020-08-07 14:23:20 · 16393 阅读 · 6 评论 -
Vue 中使用watch监听$route 无效问题
Vue 中使用watch监听$route失效问题!路由:{ name: 'secondUser ', component: secondUser, path: '/secondUser',}-------------------------------------------------------------------------------------------------------------------页面中监听 watch:{原创 2020-07-21 13:19:42 · 4822 阅读 · 0 评论 -
Element ui Table表格匹配字典项中的数据
在工作中通常会遇到Table表格匹配字典项中的数据这里介绍几种方法大家仅供参考 <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="type" label="类型"原创 2020-07-15 15:52:11 · 7232 阅读 · 1 评论 -
Vue element ui结合java后台导出Excel(二进制文件流)
Vue结合后台详解导入导出Excel问题今天讲讲 前台Vue配合后台(java)导出Excel 后台返回的数据是 二进制文件流 如何将此变为 弹框下载当时开发呢,我们后台是java 有控件 可以直接将数据导出并生成Excel文件,但是前后台传输是不可能直接传输文件的,是以二进制文件流进行传输的,此时呢就会遇到一个问题,因为是后台,必然会涉及到权限,权限就涉及到token,token传输就会出现限制问题,所以我会列出三种方法我的是Vue项目~~1.不需要token的方法 <template&g转载 2020-07-10 10:14:06 · 2351 阅读 · 0 评论 -
vue -element ui 自定义验证规则,封装在公共的文件里
1.首先 新建一个rules.js 的文件 编写校验规则 我新建在api 文件下。// 账号let codeReg = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/// 电话let phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/// 必须为数字let numberReg = /^\d+$|^\d+[.]?\d+$/// 密码let passwordReg = /^(?![\d]+$)(?![a-zA-Z转载 2020-07-08 09:39:21 · 1466 阅读 · 1 评论