Vue+ElementUI

vue+elementui table 改变当前的行样式

在cue+elementui的table中，如果table的某个列的字体样式是正常或者其他，就给他改称为字体样式为红色的或者其他，就是改变样式用v-ifelse的办法就可以//关键{{scope.row.address}}{{scope.row.address}}exportdefault{data(){return{tableData:[{date:'2016-05-02',name:'王小虎'
星星误·2020-06-25 18:05

vue+elementUI表单优化,修改行数据,不用发送请求初始化表单

写出这个优化之前,是因为服务器有点差,每次修改上下架状态的时候,发送修改状态的请求,为了页面显示的"文本"状态也改变,还需要发送一次初始化列表的数据,对于以后数据量大的时候,是很不友好的,而且前端的优化,不就是减少请求么,所以就想着优化一下.思路:1.后端返回的初始化表单数据,我存在了data()的tableData中,上下架的状态(0:下架1:下架)2.html代码,elementUI在表单中已
麦兜:)·2020-06-25 18:29

vue+elementui实现可编辑表格，数值限制最大最小值

关键思想：1.template中加scope=”scope“属性，用来获取当前行中对应的列的值；        2.通过与的显示隐藏切换来实现编辑/不编辑状态        3.部分单元格不可编辑，利用后台传回的数据，加一个字段v-if=’该字段‘，则当前单元格可编辑vue页面：{{institutation}}{{scope.row.areaName}}{{scope.row.szss}}exp
The ever Boy·2020-06-25 11:14

vue+elementui怎样点击table中的单元格触发事件--弹框

elementui中提供了点击行处理事件查看位置：elementui的table事件elementui的table中怎样点击某个单元格触发事件？可以先看一下官网中table的自定义列模板代码{{scope.row.date}}姓名:{{scope.row.name}}住址:{{scope.row.address}}{{scope.row.name}}编辑删除exportdefault{data()
绯红大嗳·2020-06-25 11:34

Vue+ElementUI实现input框模糊查询提醒

先是用了ElementUI中给的el-autocomplete例子：data中的数据定义：data:{tableData:{name:'',},nameTipsArray:[],//用于存放下拉提醒框中数据的数组nameArray:['name1','name2','name3']//页面初始化时全部数据}然后对v-model绑定的tableData.name进行watch监听：watch:{'t
dawa大娃·2020-06-25 10:50

Vue+elementUI设计前端界面小问题总结

1.修改table内容数据后，table没有自动重新渲染：直接对已有的数组进行赋值，不会触发视图的更新，需要使用this.$set()函数，具体可见上一条博客点击跳转2.将el-table居中的简单方法：只需在el-table的外层套上即可即：3.scope的理解scope.$index获得当前行的行号scope.row获得当前行的数据例：{"row":{"name":"kongzhi1","ag
kun_0·2020-06-25 10:15

vue+elementui实现表头根据后台数据动态生成字段

有时需求涉及表头动态加载，肯定是涉及渲染了代码如：cols:[{label:"节点编号",prop:"node",type:"normal"},{label:"名称",prop:"name",type:"normal"},{label:"类型",prop:"type",type:"sort"},{label:"坐标",prop:"coordinate",type:"normal"}]prop属性设
༺༂鑫༒海༂༻·2020-06-25 08:26

vue + ElementUI 点击页面内按钮跳转，导航栏选中问题

vue+ElementUI点击导航栏跳转页面是可以正常跳转高亮的，但通过页面内点击按钮跳转页面就会导致侧边栏不知道该选中那个了，下面说下解决方法computed:{onRoutes(){//this.
DenggLin·2020-06-25 07:01

ElementUI表格中获取当前行数据（实现对table数据的修改和删除）

前言在此之前，已经实现了vue+ElementUI的跨域查询并渲染查询结果的功能，现在想要在每一行中添加修改和删除的按钮。于是乎就需要获取当前行的数据，于是就有了下面两种方式的获取。
HowYouth·2020-06-25 07:08

VUE+Element学习笔记（二）VUE+ElementUI值传递

前言在项目中，左侧菜单点击后，会在右侧新建一个tabs标签页。创建标签页是一个公共方法，参数是菜单node信息，不方便增加参数。但我需要在创建tabs时还要带上一点别的信息，简单来说，就是我要查看详情，除了新建一个查看详情的tabs之外，我还需要带着数据进入新的tabs中。我试了使用$emit和$on进行监听，发现当$emit组件已经触发事件后，需要$on监听的组件还没有create好，导致无法监
HowYouth·2020-06-25 07:08

vue实现阿里云的左侧全部菜单

这个菜单,类似于那种树形菜单,用v-for循环就行了这样的菜单,可以看下这个Vue+ElementUI手撸后台管理网站基本框架(三)登录及系统菜单加载###首先,我们的数据模式要可配的,使用json数据格式
潇蓝诺依·2020-06-25 05:32

vue+elementUI表格组件（支持多选、分页、选中回显、搜索、增删改查）

本组件能实现表格多选，分页，分页选中回显，新建、删除、修改、查询。思路要点将组件的操作产生的参数全部返回父组件，由父组件处理接口数据的交互这样就可以提高表格组件的多样性，提高耦合程度，和高复用性，不必因为接口处理方式不同而重新编写组件父组件模板代码，主要是用tableData传输数据，其他@方法来接收参数引入组件importcheckboxTablefrom'@/components/common
张井乙ccccyc·2020-06-25 04:50

Vue+ElementUI , el-casecader级联面板参数回显

目录标题背景一、级联面板返回的数据格式说明二、级联面板单选（解决）三、级联面板多选（妥协）背景ElementUI中Cascader级联选择器组件作为Select选择器组件的补充，可以帮助我们方便且友好的显示多层级数据的筛选。但级联面板的返回数据在用于数据回显时，却显得比较麻烦。因此，现在将记录一下自己在做级联面板数据回显时的方案。一、级联面板返回的数据格式说明通过ElementUI中在线运行工具的
小张写bug·2020-06-25 03:40

vue+elementUI 下拉分页

不多说直接上代码,(此组件后期有空完善,还存在某些没找到的bug)import*asapifrom'@/api/main'importaxiosfrom'axios'exportdefault{name:'selectPage',props:{apiName:{//传入的接口名称type:String,default:''},placeholder:{//传入的接口名称type:String,de
做梦..·2020-06-25 02:49

解决使用vue+elementui组件采用webpack打包导致vendor过大的情况

1.如果你使用了webpack来打包你的vue项目，如发现你的vendor.js过大则可以参考本文的解决方案.2.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的.如下图在main.js引用element-ui等第三方库。后果就是你的服务器端的js文件越大则用户加载页面的时间会越长(因为所需下载j
williams_zhong·2020-06-25 02:48

关于使用vue+elementUI使用日期选择器控件el-date-picker选择时间上传到后台减少一天问题

解决element日期选择控件上传到后台减少一天问题问题描述问题描述使用elementUI的时间选择控件el-date-picker后，作为参数上传到后台接收，发现后台时间比前台时间少一天。前台代码：-后台代码：@RequestParam(value="createTimeTo",required=false)@DateTimeFormat(pattern="yyyy-MM-dd")@JsonFo
寒语-四月魂·2020-06-25 01:36

vue+elementui实现可编辑表格

项目需求表格的内容显示和修改框切换显示如图所示，点击修改按钮切换到输入框和选择框点击前：点击后：1.首先先定义一个变量用来控制span和input的显示隐藏，因为点击按钮只能修改该行数据，所以要给每行一个index作为标识tem//注意此处要写为row，写成scope会报错{{row.rectPeriod}}//用showEdit[$index]来控制显示隐藏jsexportdefault{dat
旗木夫人·2020-06-24 15:30

vue+elementui实现批量删除

在el-table中手动添加一个el-table-column，设type属性为selection即可temjsexportdefault{data(){return{//批量删除选中idselectionList:[],}},methods:{//批量选择时触发handleSelectionChange(selection){this.selectionList=[]selection.forE
旗木夫人·2020-06-24 15:59

vue+elementui实现动态多级表头+合并单元格+自适应列宽

1.动态多级表头的实现因为项目需求是要根据不同查询条件，显示不同的表头，所以需要动态渲染表头在表格渲染的时候，label和prop要对应起来，简单一点的办法就是让后端传过来，这是我给后端提供的格式title:[{label:'一级标题1',item:[//label为表头的内容，prop为对应的字段名（注意字段名要和后端传过来的数据列表的字段名一致）{label:'二级标题1',item:[{la
旗木夫人·2020-06-24 15:59

vue+elementUI表格下载为excel

1：准备工作：安装插件cnpminstall--savexlsxfile-saver2：页面引入：importFileSaverfrom'file-saver'importXLSXfrom'xlsx'3：添加方法：exportWageDetail(){varxlsxParam={raw:true};varwb=XLSX.utils.table_to_book(document.querySelec
butcher36·2020-06-24 14:37

vue+elementui实现分页效果

当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。1.本次所使用的是vue2.0+element-ui实现一个分页功能，element-ui这个组件特别丰富，分页中给我提供了一个Pagination分页，使用Pagination快速完成分页功能最终效果展示数据管理用户列表//这是显示总共有多少数据，需要
潜行的Q·2020-06-24 13:08

VUE+elementui面包屑实现动态路由

我的路由：constrouterMap=[{path:'/',redirect:'dashboard',component:Layout,name:'Dashboard',children:[{path:'dashboard',component:()=>import('@/view/dashboard'),name:'Dashboard',meta:{title:'dashboard',icon
lzcwds·2020-06-24 11:26

vue+elementUI表单和图片上传及验证

最终实现需求如下图：form表单内容与重点人员图片同时上传且图片为必填项分析弹框页需要解决的问题有：1、表单内容的验证及必填项2、新增和编辑用同一个组件如何处理数据3、图片需要和信息一起传递（即不允许自动上传）4、图片必填的验证问题针对上述问题作出方案：1、el-form的表单验证需要注意几个地方：a：el-form-item的prop值需要和表单标签的v-model值保持一致例如： b：验证规则
辣姐什么鬼·2020-06-24 05:19

vue+elementUI当渲染文本超出一定字数时显示省略号

如图,当渲染的文字超出30字后显示省略号1.设置过滤器filters:{ellipsis(value){if(!value)return"";if(value.length>30){returnvalue.slice(0,30)+"...";}returnvalue;}},2.使用过滤器{{scope.row.content|ellipsis}}3.ok了
sun shying·2020-06-23 23:03

vue+elementUI中使用Echarts之饼图

实现效果如图老规矩先创建占位子的div然后引入Echarts,并且模拟数据exportdefault{name:"",data(){return{charts:"",opinion:["及格人数","未及格人数"],opinionData:[{value:12,name:"及格人数",itemStyle:"#1ab394"},{value:18,name:"未及格人数",itemStyle:"#7
sun shying·2020-06-23 23:02

vue+elementUI项目中，如何让Element UI的Message消息提示每次只弹出一个

1.封装js，命名为message.js，代码如下：/**防止重复点击重复弹出message弹框*/import{Message}from'element-ui';letmessageInstance=null;constresetMessage=(options)=>{if(messageInstance){messageInstance.close()}messageInstance=Mess
Jerry丶惟·2020-06-23 21:28

一个学Vue+elementui的好地方

因为最近要用到Vue+ElementUi，上网搜了很多的资料，终于发现了一个网站，讲的特别好，适合有Anjularjs基础的同学，非常的详细。
java_xxxx·2020-06-23 20:35

Vue+elementUI的this.$refs.对象名.方法名的理解

最近用到了Vue+elementUI,原先觉得是坑多，后来发现是自己理解不到位。
java_xxxx·2020-06-23 20:35

vue+elementui运用el-upload结合vod-js-sdk-v6实现腾讯云点播视频上传

第一步：npminstallvod-js-sdk-v6写成组件upload代码片。//Anhighlightedblock上传视频/音频import{getSignature,getAntiLeechUrl}from'@/api/upload.js'import{sendVideoResource}from'@/api/learning'importmomentfrom'moment'import
代码小李·2020-06-23 17:06

Vue+ElementUI: 手把手教你做一个audio组件

目的本项目的目的是教你如何实现一个简单的音乐播放器（这并不难）本项目并不是一个可以用于生产环境的element播放器，所以并没有考虑太多的兼容性问题本项目不是ElementUI的一个音频插件，只是一个教程，不过你可以自行扩展实现本项目只是为了学习audio相关事件以及API本项目的音频文件是位于static/falling-star.mp3，歌曲名为：星球坠落Live艾热、李佳隆查看在线demo:
小熊吉米·2020-06-23 14:00

Vue+ElementUI: 手把手教你做一个audio组件

目的本项目的目的是教你如何实现一个简单的音乐播放器（这并不难）本项目并不是一个可以用于生产环境的element播放器，所以并没有考虑太多的兼容性问题本项目不是ElementUI的一个音频插件，只是一个教程，不过你可以自行扩展实现本项目只是为了学习audio相关事件以及API本项目的音频文件是位于static/falling-star.mp3，歌曲名为：星球坠落Live艾热、李佳隆查看在线demo:
小熊吉米·2020-06-23 14:00

vue+ElementUI实现订单页动态添加产品效果

使用vue2.0(ElementUI基于vue2.0)+ElementUI(饿了么出品)实现的在订单页面动态添加产品的效果，并自动计算总价。代码直接保存为html文档，使用浏览器打开即可查看效果。效果图：订单页面选择选择产品0"style="font-family:MicrosoftYaHei">总价：{{sumPrice}}元0">varorder=newVue({el:'#orderTest'
GavinWGQ·2020-06-23 14:55

vue+element ui 实现新建编辑共用一个模态框

vue+elementui实现新建编辑共用一个模态框在我们开发过程中常常会遇到新增和编辑模态框布局类似，只是一个带参一个不带参的区别，那么我们写两个模态框也可以实现，为什么不这么做呢？
Wombat-·2020-06-23 12:14

使用vue＋elementUI页面实现前端做分页

当数据不是很多的时候，后端会要求前端来实现分页功能。那么下面讲下怎么使用element来实现前端做分页功能。由于功能比较简单，那么就直接上代码：//计算当前页面的数据tableList(){//this.displayData是当前页面要显示的数据this.displayData=[]for(//pagesize是当前页面要显示总条数，例如：每页显示20条；currentPage是当前页面数;va
小鱼儿游啊~游·2020-06-23 09:26

element-ui关于el-select的下拉框选项中出现“无匹配数据”问题分析及解决办法

最近的项目前端用到vue+elementui框架，在使用过程中遇到很多问题，在后几篇文章中会一一列出，有解决的，有没解决的。
出现bug问题不大·2020-06-23 05:41

vue+elementUI 后台管理极简模板

vue+elementUI后台管理极简模板写在前面此篇文章为一篇说明文档，不是教你从零构建一个后台管理系统，而是基于一个实际项目，已经搭建好了一个后台管理系统的基础框架，教你如何在此基础上快速开发自己的后台管理系统
crxk·2020-06-23 00:12

前台vue+elementui 后台java 实现动态（可扩展）表头

效果图：下边的table比上边的table多了一列思路：前台其实很好实现，两个数组，一个是表头，一个是数据，分别循环就行了，后台把表头集合作为查询条件，然后拼接sql，就可以得到一一对应的结果了。重点：我觉得重点其实是数据结构，重点是两张表，一张是主表，存放固定属性，一张是付表，主要寸的是表头结果数据。还有表头的基础数据是单独一张表。举个例子：做一个优秀员工的评选，评选标准有长得是否好看、吃的多少
buyaopingbixiazai·2020-06-22 19:51

vue通过返回值来判断图标的显示/隐藏，改变图标颜色

在表格中通过后台返回数据来判断图标的变化方法1：如上，后台返回的status=1为已阅，status=0为未批阅，已阅则显示绿色的图标，我这里是用vue+elementui来实现的： 方法2：只用一个图标
asteriaV·2020-06-22 15:37

vue+elementUI中使用v-for循环出多个select下拉框，默认绑定，但改变一个下拉框，其余下拉框也会改变的问题

样式如下option是写在data里面的数据。scope.row.type是后台传来的数据，也就是默认绑定的是后端传过来的值。
Ccoolor·2020-06-22 15:47

【工作周报】2019年7月 前端开发工作周报汇总

另外，也对vue+elementui的开发模式更加的熟悉。同时本周笔者也开始每天利用一
HisViolet·2020-06-22 11:25

总结vue+elementUI的填坑之路（一）

用vue和elementUI做前端两年多了，大大小小的项目也做了不少，遇到过许多的坑，有时候项目太忙，没有那么多的时间来整理一些知识点。这是挺吃亏的，，因为我始终相信不总结就相当于没学到东西。所以趁着2020年的第一天，对自己立个誓言吧，以后不管项目多忙，抽空总结一下遇到的坑哈，一来可以提升自己，当遇到同样问题时候，可以很快想起这些知识点的解决方案，二来可以方便其他人查阅问题点，便于后来者的学习（
一只有梦想的笨鸟·2020-06-22 10:30

新起点丨重构UI，JumpServer开源堡垒机v2.0发布

在此次升级中，JumpServer堡垒机使用Vue+ElementUI进行了前端页面的重构，同时完成若干功能优化和Bug修复。
FIT2CLOUD飞致云·2020-06-22 10:36

vue+ElementUI自定义tree树形控件小图标

Element-ui自带的图标库还是不够全，还是需要引入第三方icon，自己在用的时候一直有些问题，参考了些教程，详细地记录补充下教程：1.进入iconfonthttp://www.iconfont.cn/注册>登录>图标管理>我的项目2.进入到我的项目里(第一次进可以新建项目)新建项目：项目名称随便写。前缀注意，不要跟element-ui自带的icon(前缀为：el-icon)重名了。设置完，点
Ysmitgo·2020-06-22 09:02

Vue+Springboot实现头像上传功能

Vue+Springboot实现头像上传功能前言前端部分页面代码js代码后端部分前言最近在着手一个前后端分离的项目，前端用的Vue+ElementUI，后端则是使用Springboot+mybatis实现的
Xiaoming985·2020-06-22 08:10

VUE+ElementUI实现table 行上下移动的效果

默认exportdefault{data(){return{URLModles:[{index:'1',expressCode:'SF',expressName:'顺丰快递',status:true,},{index:'2',expressCode:'YTO',expressName:'圆通快递',status:true,},{index:'3',expressCode:'UC',expressN
Sunshine0508·2020-06-22 06:20

vue+elementUI项目搭建

安装node基于node之npm环境下操作vue，所以先部署nodewgethttps://npm.taobao.org/mirrors/node/latest-v13.x/node-v13.8.0-linux-x64.tar.gzmkdir/usr/local/nodetar-zxfnode-v13.8.0-linux-x64.tar.gz-C/usr/local/node/ln-s/usr/l
Sunny_Future·2020-06-22 06:19

Vue和Element-UI做一个简单的登录页面

如下所示，是vue+ElementUI写的一个登录页面：Login.vue部分登陆界面记住密码登录CSS部分：.login-container{-webkit-border-radius:5px;border-radius
MySunshine07·2020-06-22 02:45

Vue + elementUi 实现菜单无限级的分类导航

Vue+elementUi实现菜单无限级的分类导航[{"id":1,"parent_id":0,"menu_name":"第一级菜单1","sorting":0,"node":[{"id":2,"parent_id
Meraln·2020-06-22 01:59

Vue+elementUI从头开始构建前端页面(前篇-Starter搭建)

传送门：Vue+elementUI从头开始构建前端页面(前篇-Starter搭建)传送门：Vue+elementUI从头开始构建前端页面(中篇-Table作妖)传送门：Vue+elementUI从头开始构建前端页面
Backup and share·2020-06-21 22:37

前后端分离，基于vue+elementUI的动态菜单

制作动态菜单的思路：就是当前用户登陆后，保存用户的信息，通过用户的id，去查找该用户对象的菜单。后台获取的菜单数据，最终传给前台形式就是父菜单里包含了所有的子菜单；并在前台登录成功后，把菜单数据取出来，保存在sessionStorage（相当于后端的session）中。这里由于是用的前后端分离模式，所以先在前端的routes.js路由文件中，存着系统所有的菜单，在Home.vue文件中，通过循环比
心之所向...·2020-06-21 20:57
上一页 18 19 20 21 22 23 24 25 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他