vue + element ui开发过程中需要注意的几个点
1.实现动态的数据双向绑定 关键字【$set】在这个需求开发的过程中还遇到深度克隆的问题



2:form表单的动态字段验证 关键字【promise.all】


3:动态表单验证关键字【el-form-item的 prop属性和rules属性】,至于循环出来的v-model="item.minAmount"可以做到响应式,是因为vue对Array的一些方法做了拦截处理,都处理成了响应式,也就是说通过Array的一些方法处理数据时被加进的数据会变成响应式的。


4:组件销毁前注意销毁window对象下的一些对象,比如【timer】比如一些消耗性能的动画 【requestAnimationFrame】,避免重复创建这些对象。登录时创建的一些dom标签或者jquery对象注意销毁,避免重复创建dom。重复创建最严重的情况是会导致浏览器崩溃。
5:后端二进制文件,前端下载【过程中注意:后端的header设置;注意前端的header设置】
// 后端header配置
String attachment = MessageFormat.format("attachment;charset=utf-8;filename={0}", fileName);
response.setContentType("application/x-download;charset=utf-8");
response.setHeader("Content-disposition", attachment);

async handlerLink () {
let data = await getPutLinkExcel({ ids: this.selectedIds.join(',') });
if (data.status === 200) {
let downloadElement = document.createElement('a');
//创建下载的链接
let href = window.URL.createObjectURL(data.data);
downloadElement.href = href;
downloadElement.download = '链接.xlsx';
document.body.appendChild(downloadElement);
downloadElement.click();
//下载完成移除元素
document.body.removeChild(downloadElement);
//释放掉blob对象
window.URL.revokeObjectURL(href);
}
},
6:循环生成element-ui中的upload控件时一定记得给循环体加上key且key的值不要使用index,因为upload控件会有删除操作和新增操作此时的index不唯一会造成数据错乱,此时的数据错乱的原因是由于vue的diff算法,关键字【v-for的key绑定】
vue + element ui开发过程中需要注意的几个点的更多相关文章
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- VUE -- 对 Element UI table中数据进行二次处理
时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- vue+element UI + axios封装文件上传及进度条组件
1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
随机推荐
- linux声卡录音和播放(alsa方法)
前言 客户购买多台UNO-2184,使用fedora23系统进行视频监控,视频监控的同时,也要同步采集现场画面的声音,原来系统采用的是fedora 14,之前是通过操作/dev/bsp,对声卡进行操作 ...
- ORA-55624: 此时无法为闪回归档启用表
我们在某应用中使用了FDA特性,但是某些表在解除归档后重新启用时报"ORA-55624: 此时无法为闪回归档启用表",经查询google和MOS相关信息,原因就是太频繁.解决方法: ...
- 如何从OA系统批量整理出邮箱地址,并导入到Foxmail 地址薄中?
一.打开某位leader的OA,点击查看“下属” a. 将所有的下属信息 --- 全选 --- 复制 --- 粘贴到 excel 表格中 b. 分别提取“姓名” 和 “邮箱”地址信息,结合notepa ...
- 高级UI-Path和PathMeasure
Path是一个工具类,用来记录线条的轨迹路径,然后通过绘制轨迹路径,可以得到各种各样的图案,而PathMeasure是用来对Path进行测量的工具,再Path的运用中,运用最多的就是贝塞尔曲线,也是本 ...
- idea设置内存大小
1.打开idea安装路径下bin,编辑.vmoptions两个文件 然后重启一下idea 2.直接打开idea的.vmoptions文件进行编辑
- windows下大数据开发环境搭建(2)——Hadoop环境搭建
一.所需环境 ·Java 8 二.Hadoop下载 http://hadoop.apache.org/releases.html 三.配置环境变量 HADOOP_HOME: C:\hadoop- Pa ...
- Linux系统下Dubbo安装的详细教程
Linux系统下Dubbo安装的详细教程 1.Dubbo的简介 Dubbo是 [1] 阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 [ ...
- c++ map容器使用及问题
C++ STL库map容器一些总结,欢迎大家指正补充. map容器由两部分组成,分别为关键字(Key)和值(Value),关键字和值都可以声明为任意类型的数据,注意:关键字唯一,不能重复!使用需包含头 ...
- Wing-AEP平台LWM2M设备接入
实现Wing-AEP中国电信物联网开放平台,LWM2M设备接入 一.准备 接入模组:BC35-G 平台地址:https://www.ctwing.cn/ 点击右上角控制台 点击左侧栏点击产品中心 二. ...
- leetcode最长回文
给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad" 输出: "bab" 注意: &qu ...