分类：Element

2020
10-23

element中table高度自适应的实现

1.开发环境vue+element2.电脑系统windows10专业版3.在开发的过程中,我们经常会使用到element中的table,但是我们也发现了在table的配置中,只能设置具体的高度不能设置百分比,怎么实现table高度自适应呢?方法如下:4.在对应的vue模板中添加如下代码:<el-table:data="tableData"row-key="id"sortablestyle="width:96%":height="taheight"default-expand-all></el-table>5.在return中... 继续阅读 >

2020
10-23

vue+springboot+element+vue-resource实现文件上传教程

vue页面设置<el-uploadclass="upload-demo"action="":before-upload="beforeUpload"//上传前操作:before-remove="beforeRemove"//移除钱操作:multiple="false"//禁止多选:http-request="myUpload"//文件上传,重写文件上传方法,action的路径不会起作用accept=".jar"//限制文件选择类型:drag="false":data="param"//参数:file-list="fileList"... 继续阅读 >

2020
10-10

vue实现日历表格（element-ui）

本文实例为大家分享了vue实现日历表格的具体代码，供大家参考，具体内容如下效果如图：html：后面的日期是循环出来的<divclass="calendar-title"><spanclass="calendar-left"@click="lastDateclick">&lt;</span><spanclass="calendar-center">近期事件</span><spanclass="calendar-right"@click="nextDateclick">></span></div><el-tableref="table"t:data="filterData"borderstripe><el-table-columnalign="ce... 继续阅读 >

2020
10-10

vue element ui validate 主动触发错误提示操作

elementUI使用了async-validator进行表单验证，但是当我使用下拉树（el-cascader）时，发现其不主动触发，于是我只能主动去触发，方法如下：this.$refs['form'].fields[0].validateMessage='errormessage'this.$refs['form'].fields[0].validateState='error'补充知识：element-ui打开页面触发校验问题如果你设置了关闭弹出页就resetFields（），此时打开页面仍然触发校验效果，一般是下拉框和时间选择导致的，解决办法就是... 继续阅读 >

2020
10-10

Vue Element校验validate的实例

官方文档限制输入指定类型添加type限制即可，type包括以下值：例子：rules:{bannerType:[{required:true,message:'请选择类型',trigger:'change'}],associateId:[{required:true,message:'请选择公告',trigger:'change'}],associateData:[{required:true,type:'url',message:'输入合法的链接',trigger:'change'}]}限定输入字符串的长度用min和max加以限制，elementvalidate具体某个值后的限... 继续阅读 >

2020
10-10

Vue+Element ui 根据后台返回数据设置动态表头操作

由于后端是多人开发，也没有规范数据格式，所有页面是我一个人开发，所以就会遇到同样的页面不同的返回数据格式问题。一、根据element文档，利用prop属性绑定对应值，label绑定表头。html<el-tableclass="tb-edit"highlight-current-row:data="tableData"borderstyle="width:100%"><templatev-for="(col,index)incols"><el-table-column:prop="col.prop":label="col.label"></el-table-column>... 继续阅读 >

2020
10-10

前端vue+elementUI如何实现记住密码功能

我们这回使用纯前端保存密码既然是记住密码，前端也就是使用cookie保存，访问时用cookie读取先来了解下cookie的基本使用吧Cookie所有的cookie信息都在document.cookie中存放着，是一个字符串，里面的cookie以分号和空格分隔。就像这样："key1=value1;key2=value2;key3=value3"//使用document.cookie来获取所有cookiedocuemnt.cookie="id="+value操作cookie/***设置cookie值**@param{String}namecookie名称*@pa... 继续阅读 >

2020
10-10

Vue+element+cookie记住密码功能的简单实现方法

实现功能：1、登录时勾选记住密码，用cookie保存账号和密码并对密码进行两次加密处理（纯前端），下次登录自动输入账号密码2、登录时不勾选，清空cookie，下次登录需要输入效果图：=============================================================================================================================================================================================Html<divclass="login-form-item"><el-... 继续阅读 >

2020
10-10

快速解决element的autofocus失效问题

原因：autofocus是vue中input的原生属性,element也支持这种方法,但是element中的el-input组件外面还有其他组件,导致autofocus失效,只能手动调用focus方法来聚集。方法：绑定ref<el-inputref="myNameId"v-model="form.name"/>this.$refs.myNameId.focus();动态绑定ref<el-input:ref="'input'+form.id"v-model="form.name"/>this.$nextTick(()=>{letid='input'+this.form.id;this.$refs[id].focus();})补充知识：ele... 继续阅读 >

2020
10-10

vue中element 的upload组件发送请求给后端操作

1.用到了before-upload属性，用于在上传文件前的校验，并且发送请求给后端，传输格式进行文件流传输什么都不用设置，action属性随便设置，不能为空即可！在before-upload属性的方法中的代码如下：var_this=this;debugger;//varfiles=file.target.files[0];debugger;constisJPG=file.type==="image/jpeg";constisLt2M=file.size/1024/1024<2;if(!isJPG){this.$message.error("上传头像... 继续阅读 >

2020
10-10

Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

这篇博客主要介绍树形控件的两个小小的功能：下拉菜单输入过滤框以CSS样式为主，也会涉及到Vue组件和element组件的使用。对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。使用Vue+ElementUI，构建出最基本的树如下图所示：现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。下拉菜单将下拉菜单嵌到树节点中，使操作更加简便、紧凑。效果演示效果如图... 继续阅读 >

2020
10-09

封装Vue Element的table表格组件的示例详解

在封装Vue组件时，我依旧会交叉使用函数式组件的方式来实现。关于函数式组件，我们可以把它想像成组件里的一个函数，入参是渲染上下文(rendercontext)，返回值是渲染好的HTML(VNode)。它比较适用于外层组件仅仅是对内层组件的一次逻辑封装，而渲染的模板结构变化扩展不多的情况，且它一定是无状态、无实例的，无状态就意味着它没有created、mounted、updated等Vue的生命周期函数，无实例就意味着它没有响应式数据data和this上下文... 继续阅读 >

2020
10-09

VUE 实现element upload上传图片到阿里云

首先安装依赖cnpminstallali-oss封装client若是想减小打包后静态资源大小，可在index.html引入：（然后在client.js里注释掉constOSS=require(‘ali-oss')）<scriptsrc="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>constOSS=require('ali-oss')exportfunctionclient(data){//后端提供数据returnnewOSS({region:data.endpoint,//*****.aliyuncs.comaccessKeyId:data.accessKeyId... 继续阅读 >

2020
10-09

vue+element获取el-table某行的下标,根据下标操作数组对象方式

1.在vue中对数组中的某个对象进行操作时（替换、删除），都需要用到该对象在数组中的下标。前端代码：scope.$index：获取当前行的下标scope.row：获取当前行的对象效果图：思路：通过点击事件将该对象在数组中的下标传递到方法中，然后对数组进行操作即可根据下标删除数组中对应的对象。补充知识：vue-element-upload文件上传打开选择文件弹框前进行提示或操作在项目中使用文件上传功能时，需求是不能直接弹出弹框，要先二次确认... 继续阅读 >

2020
10-08

vue+element使用动态加载路由方式实现三级菜单页面显示的操作

需要用到中间件的方式,这样就可以实现了我们想要的方式publish-center.vue<template><router-view></router-view></template><script>exportdefault{}</script><el-menu:default-active="$route.path"class="el-menu-vertical-demoel-menus"@open="handleopen"@close="handleclose"@select="handleselect"unique-openedrouterv-show="!collapsed"><divclass="tools"@click.prevent="collapse"><i>|||</... 继续阅读 >

2020
10-08

解决Vue的项目使用Element ui 走马灯无法实现的问题

1.在vue项目中引入elementuihttp://element.eleme.io/#/zh-CN/component/carousel引入后，HTML部分<el-carouselheight="150px"><el-carousel-itemv-for="iteminimgList":key="item"height="300px"><h3><img:src="item"alt=""></h3></el-carousel-item></el-carousel>JS部分<script>exportdefault{data(){return{imgList:[require('../../assets/img/images/a1.png'),require('../../assets/img/images/a2.png'),requ... 继续阅读 >