vue+element

Vue+Element ui中常用表单验证----手机号、座机、传真、邮箱、身份证号、数字和带小数点的数字

情景：最近为前端form表单提交时需要验证一下几种特殊的输入数据格式进行验证，在此记录一下。一：正则1.手机号：constreg=/^1[3|4|5|7|8][0-9]\d{8}$/;//11位手机号2.座机和传真：constreg=/^(\d{3,4}-)?\d{7,8}$/;//座机和传真格式是一样的：区号-号码3.邮箱：constreg=/^[a-z0-9]+([._\\-]*[a-z0-9
L-seeker-Q·2020-07-13 13:30

vue+element -UI前端Excel 文件导入数据

完成的效果图如下，会进行数据筛选，根据你上传的物业名称跟数据库的名称对应在这里我用到了一个插件，需要在在main.js中全局引入：import{export_excel_to_json,export_json_to_excel}from'@/api/operExcel'下载地址：https://download.csdn.net/download/qq_36597079/10634033不多说，上
qq_36597079·2020-07-13 10:24

vue+element模板导入excel文件，生成对应的table

//因项目需求，在前端业务组，需要提供公共方法，就花了点时间研究//1.使用直接复制整个文件//需用在父页面引入使用模块//调用方式//组件代码选取文件-->确认上传下载模板exportdefault{name:"feadFile",data(){return{importData:[],//存储表格数据importDataThead:[],//存储表格upData:null,//存储读取exce
玖逸少女梦·2020-07-13 10:40

vue+element实现内容区域高度自适应

步骤很简单：通过动态绑定属性给绑定高度，而高度通过innerHeight获取，减去你的头部和底部高度，剩下的就是整个内容区域的高度了！话不多说，上代码//defaultHeight是绑定的属性//注意：这里的defaultHeight必须是对象，不懂的可以去官网看下apidata(){return{defaultHeight:{height:""}};},methods:{//定义方法，获取高度减
Cage0315·2020-07-13 03:18

vue+element加入导入Excel文件功能

importfile(params){this.$http.post("/bb/AA/importExcle",params).then(({data:res})=>{if(res.code==0){this.$message({type:'success',message:res.msg})this.confirmVisible=false;this.getDataList();}else{th
尔嵘·2020-07-13 01:52

Vue+Element UI导航菜单样式修改 submenu

1.右击检查，查看现在的样式，类名复制，粘在css中修改2.el-submenu不能修改重新写一个style样式去掉scoped.el-menu--horizontal>.el-submenu.el-submenu__title{height:60px;line-height:60px;border-bottom:2pxsolidtransparent;color:#fff;font-size:2
ABCD198643·2020-07-12 23:23

vue+element固定表头滚动条导致表头错误

解决方法untl.js封装一个公共的方法//重置表格resetTableDom(table){returnsetTimeout(()=>{table.doLayout();//doLayout是element提供的对表格重新布局的方法},0)}每次请求数据的时候调用该方法this.api.getQuotaCompensationListData(params).then((data)=>{this
yw00yw·2020-07-12 19:16

el-input的使用之坑

el-input使用.native在使用vue+element的项目中,使用el-input实现点击enter键触发事件的代码如下@input使用el-input实时监测值的变化
youngjqz·2020-07-12 18:51

vue基础（一）-使用vue-cli4.1.2创建项目

今天我们来用vue+Element搭建一个前台项目，废话不多说，咱们开始吧！环境安装的话大家可以参考一下这里。在这里我用的vue脚手架的版本是@vue/cli4.1.2。
z晨晨·2020-07-12 14:49

关于获取验证码 vue+element

先看效果图吧~一步一步解析吧。1、样式以及dom（校验我就不写了但是我会给加校验的方式）这里img显示的图片是后台给的blob格式首先，在created中先存一下验证码的规则。时间戳加随机数根据需求修改exportdefault{name:'Login',data(){return{loginForm:{},getVerfyCode:'',key:'',//校验方式loginRules:{user
程序猿中的彭于晏·2020-07-12 13:48

vue+element 学习之路（一）数据表格分页

学习Vue快一个星期了，因为以往习惯了用JQuery去操作DOM对象的方式，一开始理解起来有些许吃力，看了快一个星期文档和各路大神的博客讲解后思路开始慢慢清晰起来，所以决定自己写一个demo，通过实战发现自己知识盲区，一点一点完善自己的demo，并且每隔一段时间记录一下自己的学习成果，做阶段性的总结首先-环境搭建环境搭建这里推荐一篇文章，讲解的非常详细https://segmentfault.co
倔强的啊强·2020-07-12 10:59

element ui 实现上传文件到阿里云oss

背景介绍所写的项目是用vue+element搭建的，想要实现一个图片上传的功能，存在阿里云服务器。后台看了阿里云文档，觉得客户端直传是最合适的方案。
qq_43082782·2020-07-11 20:27

VUE+element实现分页展示

在写前端的时候遇到一个问题，希望对不断增加的结果进行分页展示，但是实际运行时却发现随着不断增加并没有分页而是出现滚动条不断向下增加，如下：后来百度，参考了https://blog.csdn.net/qq_42783610/article/details/81840695，问题才得到解决...//total总共多少条数据exportdefault{data(){return{info:[],//数据
左行右岸_KIng·2020-07-11 09:19

vue+element下拉列表搜索列表数据

1.以性别为例性别:constxbTypeOptions=[{key:'男',display_name:'男'},{key:'女',display_name:'女'}]constxbTypeKeyValue=xbTypeOptions.reduce((acc,cur)=>{acc[cur.key]=cur.display_namereturnacc},{})data(){return{listQu
青椒切小块·2020-07-10 23:43

【VUE+Element】vue-quill-editor的使用，上传图片+音频+视频+自定义上传方式

效果：前提：quill-editor只支持三种标签pbspan,如果要用其他等标签，要用Quill中提供的register方法去注册标签。对于原生的视频上传，只能上传地址，现在要实现本地上传对于本地上传，需要组件辅助，上传时打开本地文件，如下。对于音频及其他，要组件工具栏中自定义，因为原生没有对音频图标进行封装（格外注意！）本文对编辑的文字大小做了格式扩展实现：1、引入vue-quill-edit
知永无涯·2020-07-10 21:36

vue+Element实现获取数据并分页

与上述样式有所不同，如需更改样式请访问Element主页------Pagination分页HTML{{items.type2string}}{{items.gentime}}JSexportdefault{name:"OpsReportAnalysis",data(){return{opsList:[],//返回的数据projectReportList:[],//projectReportLis
爱编程的小金毛球球·2020-07-10 16:26

vue+element实现列表数据分页(连接后台数据)

1，在表格下方写入data(){return{pageIndex:1,pageSize:10,totalPage:0,}},3.methods中：XXXXXXData(){this.$http({url:this.$http.adornUrl('/后台数据连接'),method:'get',params:this.$http.adornParams({'name':this.listQuery.n
青椒切小块·2020-07-10 16:53

基于vue+element实现全局loading过程详解

项目中使用的是vue+element实现的全局loading1.引入所需组件，这里主要就是router和element组件，element组件引入可以参考element官网2.下面就是重点及代码实现了首先是全局的一个变量配置参数
·2020-07-10 10:09

vue+element踩坑记-怎么实现常见的多条件查询

需求分析我们在做项目的时候遇到的比较多就是查询数据，比较简单的是没有任何条件的查询，这样的是最基础的，也是最好做的，一般就是直接一个get方法就可以直接实现了，只需要调一下接口就可以的，稍微复杂一点的就是单条件查询，其实我以前是写数据脚本的，也就是只写一个对数据库的CURD的操作的，那么我是稍微了解一些对于数据库的操作的，那么我们前端需要做的就是将需要的查询条件给到后端，后端通过连接数据库对数据库
何处锦绣不灰堆·2020-07-10 00:40

实习周记1

刚进入公司，前端组长先帮助我配置了开发所需要的环境，跟我讲解了当前公司正在使用的框架等，我了解到公司目前正在使用react和vue两套前端框架，组长告诉我目前正在做的项目是使用vue+element前端框架的
zatyy·2020-07-09 04:11

vue+element 实现上传（upload）和下载（download）

最近自己摸索了一下elementui,学了点东西总结记录分享一下element中文官网上有upload的文档内容，虽然不多，但还是可以用的：http://element-cn.eleme.io/#/zh-CN/component/upload但好像没有看到下载的内容，就自己去找了一波。下面两张图是效果图。简单点直接附上代码downloadview导出importFileSaverfrom"file
游1·2020-07-09 03:19

一次前后端分离项目部署实践

待部署项目介绍简单说来待部署的项目就是一个todolist，项目内容和逻辑很简单，但是因为是我的第一个前后端独立完成的项目，所以开发起来还是有点费劲的，项目前端采用的是Vue+Element框架，后端采用的
雪域蓝天·2020-07-09 02:02

Vue+Element UI+SpringBoot前后端分离框架

Vue+ElementUI+SpringBoot前后端分离框架一、准备工作检查环境安装淘宝镜像二、创建vue项目vue项目创建步骤初始vue项目结构安装axios安装element-ui编写vue项目编辑后的vue项目结构三、快速创建SpringBoot项目新建user表SpringBoot创建步骤初始SpringBoot项目结构解决跨域问题编写SpringBoot项目编辑后的SpringBoot
还是改日吧·2020-07-08 21:38

将element中的表格封装成组件

在vue+element的一些后台管理项目中表格分页是经常用到的，所以我在element的基础上，将表格和分页组封装成了一个组件。表格子组件文件{{item.renderEventTxt?
ccyzz5·2020-07-08 21:07

关于antdesign of vue Form表单中自定义组件（数据字典）的实现 以及值不能回显的问题

之前项目前端工程是采用Vue+Element的框架，当前项目框架是Vue+AntDesign。最近发现Element和antdesign这两个组件库还是存在一些细微区别的。今天针对Form表
赵景坤·2020-07-08 20:31

vue+Element Ui 实现自动上传图片

点击上传文件按钮beforeAvatarUpload方法自动上传1到多个图片上传文件**//上传画稿之前先判断画稿规格再插oracle再post到php//为了解决onload异步使用promise**beforeAvatarUpload:function(file){var_this=this;returnnewPromise(function(resolve,reject){//为了解决onl
weixin_34268310·2020-07-08 17:57

vue+element 监听某个div的变化，然后执行相应的事件

1.安装element-resize-detectornpminstallelement-resize-detector2.引入elementResizeDetectorMakerimportelementResizeDetectorMakerfrom'element-resize-detector'3.使用mounted(){this.erd=elementResizeDetectorMaker
tour9566·2020-07-08 07:47

改变element中table某一行的字体颜色

最近用vue+element写管理平台的时候，领导要求某一行值大于多少的时候，字体变为红色，费了点功夫解决了，和大家分享一下，嘻嘻～1.首先，el-table的标签里要加点东西,就是这个:row-class-name
微凉薄荷糖·2020-07-08 05:30

vue+elemen 实现el-tooltip在文本超出区域后浮现

Vue+element实现tooltip在文本超出区域后才会浮现前言具体需求解决方案方案一方案二具体方法1.先在页面上定义一个tooltip标签2.在文字区域的父标签上添加鼠标移入移除方法3.引入需要的方法
sgabon·2020-07-08 04:51

Vue+element 实现表格的增加行、删除行的功能

功能需求：1、实现一个表格，可以增加行，可以修改每一行的数据；2、获取选中的行的数据，获取选中行的索引；3、根据获取的行的索引删除相应的一行的数据。tableData的数据可以从后台获取。效果：代码实现：-->js:import'../../../assets/css/commlist.css'import'../../../assets/css/comm.sass'import'../../..
热爱代码的葫芦娃·2020-07-08 00:10

vue+Element实现tree树形数据展示(将数据封装成树形数据)

element组件官网:https://element.eleme.cn/#/zh-CN/component/cascaderhtml:单选选择任意一级选项数据:data(){return{orgs:[{value:"000/000",label:"朝阳区"},{value:"000/000/000",label:"中山小学"},{value:"000/000/000/000",label:"六年
热爱代码的葫芦娃·2020-07-08 00:10

Element el-upload 自定义上传单个指定格式文件

后台玩前端，第一次使用VUE+Element。对于文件上传这一块折腾了好久才搞定，记个笔记。同时帮助需要的人。VUE代码如下：选取文件上传请选择Execl文件，然后点击上传。
一根烂笔头·2020-07-07 17:45

Vue+Element UI实现纯前端分页

思路：我们在请求后端拿到的数据往往有很多条，这时候我们就希望通过分页让页面上只展示某部分数据如何展示某部分数据呢？既然是分页，那么必定会涉及到两个东西：一、每一页的数据条数，设它为pageNum二、当前页，就是当前页是第几页，设它为currentPage那么我们就可以根据这两个变量进行计算，计算什么呢？计算出当前要展示的是从第几条数据开始(设它为start)，到第几条数据结束(设它为end)开始和
小敏同学·2020-07-07 08:36

JS局部打印 Iframe版

jquery.PrintArea.js，官网https://plugins.jquery.com/PrintArea/很好用的插件，但是目前2.4.0版本貌似并没有支持npm安装，而自家公司目前前台用的是VUE
Mayertt·2020-07-06 23:40

vue+Element ui中使用 upload实现Excel文件上传

文章目录业务需求：实现方式：具体步骤：1、引入组件：2、data中定义：3、methods中方法：业务需求：批量导入Excel文件实现方式：使用组件upload具体步骤：1、引入组件：导入Excel2、data中定义：fileList:[],//excel文件列表limitNum:3,//选择文件个数actionUrl:"/api/teach/importCourse",//上传文件urlisSh
梦蝶—Nydia·2020-07-06 22:48

Vue中qs插件的使用

之前用Vue+element写了一个后台管理系统，在登录时使用axios请求数据传参时无法正常的获取数据。之后也是一通百度，发现原因是传递参数要将参数序列化。
尘生杜若丶·2020-07-06 05:10

解决Element-UI 侧边栏页面刷新后不高亮显示的问题

最近在写一个后台管理系统，用的vue+element，搞到侧边栏导航的时候路由跳转没有问题，但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了，因为项目时间比较紧，并且没有影响到我后面的开发所以就搁置了一段时间
尘生杜若丶·2020-07-06 05:39

element 框架 el-upload 上传文件问题

在使用Vue+element中的el-upload组件做文件上传时，最根本的原因是把路径写错，导致系统提示跨域错误，直接看代码：点击上传data(){return{targetAction:''}}el-upload
OD杨小凡·2020-07-06 02:33

vue+element 将图片压缩并转换成base64上传图片

一：我用的是具有拖拽功能的上传图片的组件：点击上传，或者拖拽图片至该位置，图片大小2MB以内复制代码二：上传图片，因为要限制图片的格式，还要转换成base64，所以我用的http-request参数，这个参数可以覆盖覆盖默认的上传行为，可以自定义上传的实现:图片小的话，转换成base64可以成功上传，但是图片超过1.5M的转换成base64上传不成功，后台说我没有传给他参数，我后来了解了一下，说是
weixin_34249367·2020-07-06 00:22

Vue+Element UI封装Axios请求，支持PayLoad、Form Data两种方式

由于Element的Loading是全局等待条，每次请求都需要显示，有时候不太方便。下面做了一个处理，根据情况，在请求参数中添加showLoading=true，自行显示全局等待条。importAxiosfrom'axios'importqsfrom'qs'import{Message,Loading}from'element-ui';letloading;//定义loading变量functio
sunct·2020-07-05 13:08

spug 一个好用运维管理平台

https://spug.qbangmang.com/publish/menu基于开源运维平台Spug的后台，使用Vue+Element组件库开发的脚手架，可以独立启动运行，根据自己需要快速开发需要的后台功能
stone_tomcat·2020-07-05 13:22

vue+Element UI 垂直卡片布局，使上下两个卡片有明显间隙

1.问题描述：上下两个卡片(1)的部分老是找不到办法来变成像右边红框（2）这种显示？2.解决方式：整体思路，在卡片的上一级设置布局元素的排布（这里要的是垂直），然后设置局部样式，在CSS部分加上一个下外边距(margin-bottom)；内边距只影响卡片本身，会在卡片上有更多的留白部分而已。1）在控制卡片的布局列的部分加上一个class，然后设置它让它按列分布；样式部分:.box{height:8
小包子惹·2020-07-05 07:17

vue-json-viewer实现JSON效果【高亮、可折叠、可复制】

初学前端，用的架子是vue+element，目前有个需求，想将string类型的json字符串，以json格式展示。
少年阿峣_从零单排·2020-07-02 16:09

vue+element 弹框嵌套表单并验证

最近做项目，需要实现一个功能，就是点击新增按钮实现弹框，弹框里面是表单，点击保存的时候对表单进行验证，这样一个功能一点一点的去实现很简单，但是聚合在一起嫩是花了我半天时间，最终实现了这个功能，我也会把我做的过程中的错误贴出来，并写上解决办法（只是我的代码出现的问题）'Errorineventhandlerfor“click”:“TypeError:Cannotreadproperty‘valida
有个派大星·2020-07-02 14:38

循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示

在前面随笔《循序渐进VUE+Element前端应用开发(12）---整合ABP框架的前端登录处理》简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能，本篇随笔继续深化这一主题，着重介绍基于ABP
伍华聪·2020-07-02 11:00

循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示

在前面随笔《循序渐进VUE+Element前端应用开发(12）---整合ABP框架的前端登录处理》简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能，本篇随笔继续深化这一主题，着重介绍基于ABP
wuhuacong(伍华聪)的专栏·2020-07-02 11:00

QRCode 实现绘制二维码

需求：vue+element项目中实现点击按钮下载两张二维码。
jennyya·2020-07-02 05:38

vue+element 对日期时间选取做限制及上传时格式的判断

首先，我们要说明下需求！开始时间及结束时间默认为三天前到今天开始时间不能选取结束时间之后（结束时间同理）上传时间为yyyy-MM-ddhh:mm:ss格式其中一个需求是只能选择未来一个月的数据，代码在下注意：当时间为空时，不能设置为yyyy-MM-ddhh:mm:ss格式template：data中：startDate:newDate(newDate()-24*60*60*1000*3),//开始
知永无涯·2020-07-01 10:48

vue+element +IE问题大汇总！

先来看看问题！看看有没有get请求？？为啥把他放首位呢？当然是他最坑啊！！el-dialogbody中IE会默认居中在IE兼容模式有的二级页面下的模态框会显示不全IE是不能满足flex布局的，但是有种方法让他支持\(^o^)/~解决方案:1、问题：看看有没有get请求？解决：两次get请求url和参数一样的情况下IE会缓存返回结果，造成真实数据被替代！所以，需要在get请求的请求头加唯一标识。参照
知永无涯·2020-07-01 10:48

vue+element封装公共上传图片组件

1.先定义一个上传图片的子组件//显示上传的图片//没有图片时默认显示的图片2.在子组件中定义一个props接收父组件传过来的值props:{value:{}},3.使用watch监听一进入子组件就监听传过来的value值watch:{value:{immediate:true,handler:function(value){if(!value){this.fileList=[];this.ima
渐离~~·2020-06-30 18:13
上一页 13 14 15 16 17 18 19 20 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他