在项目优化中碰到一个小问题,在每次提示框显示的时候让提示框中的输入框聚焦.如下图.一般情况下提示框是隐藏的.点击了编辑才会弹出. 那么原生属性autofocus 只在模板加载完成时起作用,也就是说只有第一次有用. 然后尝试了ref,再this.$refs.el 也不能成功拿到该元素,因为饿了么组件封装的<el-input>对应的是外面一个div,里面包了个input,在获取元素的时候有问题的. 第二种尝试,利用class 或者id 获取元素,然后再手动聚焦 el.focus(),好像也不起作用

Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中,向后台获取数据的函数写法 1. form,form-item,input的写法[^code] <el-form :model="dynamicValidateForm" label-width=&

在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用,使得我们对如何利用Element组件有一个大概的认识. 1.列表界面和其他模块展示处理 在前面随笔<循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理>介绍了基于列表展示了相关数据,并在列表界面整合了增删改查

在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理,本篇随笔补充这一个主题,介绍树列表组件和下拉列表树组件在项目中的使用,以及一个SplitPanel的组件. 1.常规树列表控件的使用 众所周知,一般界面很多情况涉及到树列表的处理,如类型展示,如果是一层的,可以用下拉列表代替,如果是多个层级的,采用树控件展示会更加

在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前端的排序代码 我们首先参考一下Element界面组件的排序说明.如下效果是Element表格组件的排序效果. 在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false.可以通过 Table 的default-sort属性设置默认的排序列和排序顺序.可以使用s

在系统处理中,有时候需要发送邮件通知用户,如新增用户的邮件确认,密码找回,以及常规订阅消息.通知等内容处理,都可以通过邮件的方式进行处理.本篇随笔介绍结合VUE+Element 前端,实现系统的邮件参数配置管理,以及基于邮件模板的方式进行邮件的发送. 1.邮件参数的配置管理 邮件参数一般需要配置如用户名.密码.邮件地址,显示名称,以及其他邮件所需的必要配置,一般我们可以通过界面管理的方式进行常规的参数配置,如下界面所示. 其中的登录密码,现在一般是授权登录密码,而不是原始的账号密码了.以163为

在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,一个是减少单一页面的代码,提高维护效率:二个也是方便重用.本篇随笔介绍在任务管理操作中,使用自定义Vue&Element组件,实现系统用户选择和显示. 1.系统用户的选择需求 在我们一些业务系统中,可能需要选中系统用户进行一些业务处理,如本篇介绍的任务系统中,如在新增或者编辑界面中,需要选择任务的执行人.参与人等人员操作. 而在查看详细数据的时候,可能需要展示相关的人员名称,如下界面所示. 前者需要弹出界面中选择用户,可以设置多选

1. import Layout from '@/views/layout/Layout'; export default [ { // 配置路由,当路径为'/activePublic',使用组件activePublic path: '/activeManage', component: resolve => require(['@/views/activeManage/index.vue'], resolve), }, { // 配置路由,当路径为'/activePublic',使用组件act

关于使用Vue+Element的项目简介~ 最近因为项目组缺前端人员,所以自己现学现做页面,先把前后台功能调通 觉得前端可真的是不容易呀哎呀~ 首先记录一下相关的Vue入门的教程: vue环境搭建示例:https://blog.csdn.net/mao834099514/article/details/79138484 vue基本语法了解:https://www.runoob.com/vue2/vue-tutorial.html   https://cn.vuejs.org/v2/guide/s

前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9630868.html 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH github 组件代码如下: <div id="uploadComponent" style="display: none"> <el

新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚垫菜盘之良器,欢迎大家无情购买使用,欢迎大家共同学习交流,欢迎大家提出改进意见. 内容简介: 本书从项目实践出发,手把手.心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术. 全书分为三

一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传API并返回URL. 二.具体实现 1.效果图展示                                   2.HTML代码 <div class="album albumvideo"> <div> <p class="type_title&

vue阻止右键默认行为 <!--不阻止右键菜单(浏览器行为),右键执行函数show--> <input type="button" value="按钮" @contextmenu="show()"> <!--阻止右键菜单--> <input type="button" value="按钮1" @contextmenu.prevent> <!--阻止右键菜

一.环境准备 node安装 node版本:v10.15.3 node下载地址:https://nodejs.org/zh-cn/ vue-cli安装 全局安装vue-cli npm install --global vue-cli 二.创建 vue + element 项目 创建 vue 项目并初始化 vue init webpack my-project 回车默认操作 安装项目 npm install 引入element 1.安装element: npm i element-ui -S 2.

这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue.element.css3.css定位. 作者在window10进行开发,目前只在chrome上进行过测试,没有大的毛病.但是还有很多小功能还不完善,代码也未进行优化,后续会继续完善功能,优化代码. 声明:项目相对来说就是一个纯静态页面,代码都比较简单,大佬可闭眼绕过,或者看一眼留下宝贵意见也可 一.项目介绍 本项目是一个网页版的个人简历系统,主要使用的技术为vue2+element进行实现. 个人简历系统主要

在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图标.顺序.URL连接等相关信息,对于VUE+Element 前端应用来说,应该原理上差不多,本篇随笔介绍结合服务端的动态菜单配置和本地路由的关联处理,实现动态菜单的维护和展示的处理. 1.菜单和路由的处理过程 由于Vue前端还需要引入路由这个概念,路由是我们前端可以访问到的对应路径集合,路由定义了常

我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言切换的处理,使系统具有更广泛的受众用户.VUE+Element 前端应用实现国际化的处理还是非常方便的,一般在Main.js函数里面引入语言文件,然后在界面上进行一定的处理,把对应的键值转换为对应语言的语义即可.本篇随笔介绍在VUE+Element 前端应用中如何实现在界面快速的支持多语言国际化的处

在VUE+Element 前端应用中,图标是必不可少点缀界面的元素,因此整合一些常用的图标是非常必要的,还好Element界面组件里面提供了很多常见的图标,不过数量不是很多,应该是300个左右吧,因此考虑扩展更多图标,我引入了vue-awesome组件,它利用了Font Awesome的内置图标,实现了更多图标的整合,可以在项目中使用更多的图标元素了,另外在本随笔的图标管理中,提供了对图标名称进行搜索,并根据图标颜色样式生成对应图标的代码,非常方便使用. Vue-Awesome 是基于 Vue.

VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:ABP框架使用),ABP框架作为后端,是一个非常不错的技术方向,但是前端再使用Asp.NET 进行开发的话,虽然会快捷一点,不过可能显得有点累赘了,因此BS的前端选项采用Vue+Element来做管理(后续可能会视情况加入Vue+AntDesign),CS前端我已经完成了使用Winform+ABP的模

前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像"懂王"怼记者:"你是一个糟糕的记者:CNN,Fake news"一样的心情,但我还是忍着难受的心情来工作和分享,毕竟工作是饭碗,分享也能化解我糟糕透顶的心情. 今天,就来分享一下基于vue和Element所封装的form表单组件,其中所用到的技术,在上一篇文章封装Vue

世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息,以变化规律拥抱变化的内容.如对于服务端来说,后端代码中类的继承关系和特殊的接口名称规律,我们可以根据用户选中的表,获取表之间的字段和关系信息,生成各种DTO和接口类等代码文件:而前端界面来说,也是依照数据库的表信息.字段信息等内容,实现查询区域.查询列表.新增界面.编辑界面.查看界面.导入导出界面等