##element-ui 第129页

vue回车事件

vue使用element-ui的el-input监听不了回车事件，原因应该是element-ui自身封装了一层input标签之后，把原来的事件隐藏了，所以如下代码运行是无响应的：解决方法需要在事件后面加上

qq_36437172·2020-07-09 23:29

如何新建一个Vue项目并导入element-ui的模板

一、基本环境配置工欲善其事必先利其器！配置环境也是很让初学者头疼的问题，但作为基础还是要学的，切莫眼高手低。这个操作适用于Windows系统，同时各个环境及配置都是最新版本。首次创建需要的配置有:npm想要下载npm可以先去Node的官网上下载安装Node，安装完Node之后会自带npm。此刻可以通过命令语句npm-v查看npm是否安装成功。可根据需要更新npm至最新版，更新指令为npminsta

ly_yanbo·2020-07-09 20:57

一个简单的Vue页面（单页面应用）

大多人使用webpack,element-ui等等组件打包了一个庞大的项目，但却忘记了Vue原本的样子，其实Vue本来可以很简单。以下就是一个简单的Vue页面。

Kevin395·2020-07-09 19:55

element-ui上传组件（el-upload）单文件上传，单选文件覆盖已有文件

需求：单选文件上传，每次只允许一个文件上传，当已选择了文件再次点击选择其他的文件时，需要覆盖上次选择的文件。但是看了看el-upload的开发文档，好像不支持这个需求，选择新的文件后无法替代旧的。研究了下源码找到了实现方法。解决方案思路利用el-upload的on-exceed，该方法是文件超出个数限制时的钩子，当把上传文件数最大设置为1的时候再次选择新文件时会触发这个方法，利用这个对文件进行重新

lcy460692978·2020-07-09 19:39

Vue Router 学习笔记一

学习笔记一安装路由的基本用法加载路由组件项目根组件视图组件路由配置参考资料安装--save-dev安装包开发环境简写-Dnpminstallvue-router--save-dev再装一下几个要用的插件element-ui

笑虾·2020-07-09 18:54

Element-ui 自定义下拉框，实现选择图片并且回显图片

自定义select下拉框：exportdefault{data(){return{//label：图片路径value：方向指向directionOption:[{label:'/static/img/rel/right.png',value:'0'},{label:'/static/img/rel/left.png',value:'1'},],};},效果：选中后的效果：js动作实现：method

Hi，all·2020-07-09 18:20

基于vuejs和element-ui的表单验证——循环表单和循环表格验证

基于vuejs和element-ui的验证：循环表单验证、循环表格表单验证代码：{{msg}}commonUseComponents/src/pages/page2/App.vue-->循环表单校验提交重置循环表格校验保存取消新增

可可西里的骄傲·2020-07-09 17:00

vue新手实战项目 vue-cli/element-ui/ (自己已做，当作记录)

vue-cli本地搭建项目：（1）http://www.hangge.com/blog/cache/detail_2109.html注意：要进入项目的文件中在执行cnpmintall以及cnpmrundev（2）https://www.jianshu.com/p/1ee1c410dc67（可以参考文末的文件架构图）（3）组件介绍https://www.jianshu.com/p/7006a663f

Lyndsey·2020-07-09 16:58

Element-ui组件库Table表格导出Excel表格

点击“点击导出”按钮后下载sheetjs.xlsx文件（导出文件）Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx和file-saver)npminstall--savexlsxfile-saver点击导出//引入导出Excel表格依赖importFileSaverfrom"file-saver";importXLSXfrom"xlsx";exportdefault

gs981600308·2020-07-09 16:08

element-ui组件库二次开发——打包、上传npm

提到组件库，最先想到的就是element-ui,我也是先那它做的demo实现。

Smile磊磊·2020-07-09 16:00

element-ui 表格中 el-table-column 添加 icon

{{scope.row.phone}}利用slot增加template标签下面的绑定数据就不写了。

冷色系微风爱丶·2020-07-09 15:53

element-ui的upload组件的clearFiles方法的调用

element-ui使用中碰到的问题重新上传点击上传exportdefault{data(){return{}},methods:{clearFiles(){this.

一只快乐的小猴子·2020-07-09 13:30

Element-ui 中对表单（Form）绑定的对象中的对象属性进行校验

如果是直接绑定属性，是可以的，但是绑定对象中的属性就需要特别处理，需要在rules中添加双引号""//注意这里立即创建重置exportdefault{data(){return{ruleForm:{name:'',region:'',activity:{type:""}},rules:{name:[{required:true,message:'请输入活动名称',trigger:'blur'},{

明天也要努力·2020-07-09 12:02

vue项目composition-api，typescript，ssr，pwa改造

选择quasar原因很简单，对比了国内外一大堆UI库(vuetify、element-ui、iview等.....)之后，发现quasar前端优化做的最好，但缺点是上手难，体系庞大，前期学习成本和耗费时间较高

jusdingzy·2020-07-09 12:33

关于萌新初识VUE的那些事（关于Element-ui与IView中的样式覆盖）

今天没有题外话，我们直接切入主题。在合作开发时，在大哥定好全局样式之后，我们个人页面的开发中是不可以影响到全局样式的，是不可以的！（不然会被骂的，就算不被骂，当你辛辛苦苦改出一个样式的时候，一回头，发现你没动，但是样式却变了，你恼火么，我很恼火！）所以在开发自己的页面时，规定样式范围很重要。所以今天我们来讲一下这个虽然很小但是很重要的知识点。在进行自己页面开发需要独立样式时请这样使用scoped字

Super-aoao·2020-07-09 11:57

vue+elementui 做的一个图片放大预览组件

基于element-ui中自带的一个组件（el-image-viewer）可自行去对应文件目录查看（node_modules/element-ui/packages/image/src/image-viewer

Auroka·2020-07-09 10:20

改变element-ui的input组件的(以边框为例)样式

在vue项目中，不可避免的会用到element-ui这个组件库，也往往总需要改变一些组件的样式去和我们的项目相适应美观，很多组件都通过给一个class名再改变就可以了，！！！

Augenstern、·2020-07-09 10:20

element-ui 入门

1.安装npmielement-ui-S2.main.js中importVuefrom'vue'importElementUIfrom'element-ui'//1import'element-ui/lib

web_hj·2020-07-09 09:39

vue2+elementUI+i18n 国际化语言切换实现

kazupon/vue-i18nvue-i18n安装：npminstallvue-i18n--save1.src目录下新建i18n文件夹>看下图2.cn.js代码importzhLocalefrom'element-ui

木子Leo·2020-07-09 06:07

element-ui中的图片上传-代码详细版

下边是方法，执行顺序：beforeAvatarUpload---执行action提交----执行handleAvatarSuccessoruploadErroruploadUrl(){varurl=process.env.BASE_API+"url"//生产环境和开发环境的判断returnurl},uploadError(){this.$message.error('上传失败，请重新上传')//t

若茶先森·2020-07-09 06:45

element-ui 表格实现单元格可编辑的方法

{{scope.row.name}}exportdefault{data(){return{tableData:[{name:"test",editeFlage:false},{name:"test",editeFlage:false},{name:"test",editeFlage:false},{name:"test",editeFlage:false},],inputColumn1:""//

zjw0742·2020-07-09 06:59

element-ui组件扩展--自定义分页组件

element-ui组件扩展–自定义分页组件*想要封装好一个组件，必须要熟练掌握这三个知识点：1.父组件传值到子组件（props）2.子组件传值到父组件（emit）3.插槽使用（slot）。

想念·2020-07-09 05:05

构建一个基于Vue完整的商城后台管理系统（附带完整代码及项目初始化）

前端技术vuevue-cli脚手架工具进行项目整体架构的搭建webpack将项目进行打包vue.router路由的分发vuex数据状态的管理axios与后端进行数据交互Element-UI实现页面结构scss

zero________________·2020-07-09 04:39

Element-UI Select 下拉框根据汉字拼音过滤选择选项（使用filter-method，filterable属性）

在使用Element-UISelect组件时，遇到一个需求是根据汉字或汉字拼音来过滤选项，记录一下解决方案。这里需要使用Element-UISelect组件的filter-method和filterable属性。另外需要使用js拼音库CnChar，这个库主要就是做汉字转拼音和汉字笔画数的。使用npmicnchar就可以安装使用啦，详细的使用CnChar文档里有介绍。需求大概是这样的：汉字匹配就不用

theajack·2020-07-09 03:27

vue-cli3 引入elementUI和样式

在plugins下面的element.js里面引入你需要的组件（这里我只是用了按钮和表格）importVuefrom'vue'import{Button,Table,TableColumn}from'element-ui'Vue.use

sunny.day·2020-07-09 03:48

vue 打开浮在窗口上的小窗口

因为用的是Vue框架，一直想用模态框或者element-ui的弹出框，但是他们都不够灵活，绕了一大圈，还得是window的弹出框。const{href}=_this.

web coder·2020-07-09 02:23

element-ui table组件中Table Events使用

文章目录页面效果table组件设置hover时背景颜色一、直接修改css样式二、配合cell-mouse-entercell-mouse-leave使用TableEvents使用说明实现methods中html中页面效果鼠标hover时显示当前行下可编辑的元素table组件设置hover时背景颜色一、直接修改css样式.el-table.el-table__bodytr:hovertd{backg

xiongdaandxiaomi·2020-07-09 02:05

axios 简单二次封装

importaxiosfrom'axios'import{Message}from'element-ui';//设置baseURL//axios.defaults.baseURL='/api'//设置默认请求头

franklin_yuan·2020-07-09 02:04

vue-cli3 按需引入element-ui

按照官网的教程：按需引入需要借助：babel-plugin-component安装：babel-plugin-component注意：官网是修改.babelrc文件，我这里为了方便就直接修改babel.config.js文件了对应的项目根目录下的babel.config.js需要修改成为以下：【我是直接拷贝官网的】在main.js里面按需引入：import{Button}from‘element-

xiaoping_·2020-07-09 01:35

element-ui自定义上传图片

按照elementui官网的说法，http-request覆盖默认的上传行为，可以自定义上传的实现。个人编写的自定义上传图片代码实现如下：html部分：只能上传jpeg、jpg、png格式的图片，图片大小在2M以内。data里面保存的数据：file_list:[//展示已上传的图片数据【修改时显示已上传的图片用的】//{//name:'01',//url:'http://voucher-backe

xiaoping_·2020-07-09 01:35

vue element-ui table 二维数组合并行

elementuitable后台返回的数据是二维数组的时候合并行的实现，下面是后端返回的数据，以下的步骤都建立在这个数据上面这是要实现的效果方法：第一步：先把二维数组转换成一维的，用上面的数据为例，转化之后的数据是这样的，（部分字段我重新命名了，根据自己的需要修改）转化的代码如下，this.newTableData用来存储转化后的数据第二步：确定每一行，要合并的行数，比如上面的图，合并的是三行，用

_Subsequently·2020-07-09 01:25

element-ui el-radio-button 用法

导出个案调查表.Pdf导出个案汇总表.Exceldata(){return{radioList:{label:1,label:2}}}methods:{radioChange(val){console.log(val)}}

wwf1225·2020-07-09 01:13

element-ui 中 table表格内容显示滚动条（一）

1.效果图：固定element-ui中table的表头，纵向内容过多时，可选择固定表头。只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。

陌上花语·2020-07-09 00:50

element-UI中select下拉框不能正确显示的问题

场景：项目中人脸设备管理信息以表格的形式展示，一个人脸识别设备只能被绑定一次，所以下拉框只能显示未被绑定的设备名称（只要设备被绑定使用，后端返回的下拉框数据就会删掉这一条被绑定的数据），当表格数据需要编辑的时候，编辑和新增不一样，需要数据回显，那么回显的时候是拿不到当前设备的名称的，所以会回显id。因为未绑定的设备数据里面已经不存在当前这一条数据了。需要用的是：element中的select选择器

小太阳...·2020-07-08 23:22

vue-element-admin与后台之间的crud

1.介绍vue-element-admin是一个后台前端解决方案，它基于vue-cli和element-ui实现。

可乐不加冰哦·2020-07-08 23:46

vue element-ui el-table表格中鼠标单击事件与双击事件的绑定

exportdefault{data(){return{tableData:[{name:'王小虎1',address:'上海市普陀区金沙江路1516弄'},{name:'王小虎2',address:'上海市普陀区金沙江路1517弄'},{name:'王小虎3',address:'上海市普陀区金沙江路1518弄'},{name:'王小虎4',address:'上海市普陀区金沙江路1519弄'}]}

太阳姐姐·2020-07-08 23:45

Vue高级5-router-反向代理-路径别名

购物车引入组件库组件库就是可以快速帮助我们实现样式布局和基本逻辑组件库vsui库组件库指的是有组件构成的类库ui库更多偏向的的是样式：sui类型说明：Vue的组件库很多，我这边列举的是比较流行的pc端【后台管理系统】element-ui

暮若朝阳·2020-07-08 23:07

【Vue】element-UI日期选择器value-format和范围选择冲突bug解决

本来想将时间选择器的时间format成8位字符串型，如20200307，但是format之后范围选择功能不能正常使用，最后使用moment插件读取八位字符串时间得以解决初始源代码参考至https://www.cnblogs.com/ceceliahappycoding/p/10862991.html初始源代码参考至本本链接过程中发现value-format="2020-03-07"则可以正常使用，

侬挪子瓦特了·2020-07-08 22:20

封装element-ui之路

封装element-ui之路为什么要封装element-ui首先来展示封装后的界面展现为什么要封装element-ui对于后台管理系统，最常用的莫过于页面上对数据的增删改查操作，太多的页面需要统一的模板了

搞前端的后端开发者·2020-07-08 22:20

element-ui 月份选择器，选择月份获取当前月的第一天和最后一天

1.html代码2.js代码changeMonth(value){letdate=newDate(value);letmonth=(date.getMonth()+1).toString().padStart(2,'0');letyear=date.getFullYear();letstartTime=year+''+month+'01';letday=newDate(year,month,0);

路人甲小码·2020-07-08 22:15

Vue，element-UI实现功能需要的技术点（重点form，table）

最近在用Vue，elementUI框架学到了一些东西，在这里进行一些系统的整理查询新建删除导出在这里主要是分为两个部分，第一个部分就是一个表单目的就是为了实现一个表单，其实主要的功能是为了实现一个查询多条件查询，第二个部分就是实现一个删除功能，添加功能，导出功能。:model="dataForm"需要注意的是这里绑定了一个form表单在这里需要注意的是一些小问题，就是你做的项目不再是自己的制作de

又是重名了·2020-07-08 22:36

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

Vue+ElementUI+SpringBoot前后端分离框架一、准备工作检查环境安装淘宝镜像二、创建vue项目vue项目创建步骤初始vue项目结构安装axios安装element-ui编写vue项目编辑后的

还是改日吧·2020-07-08 21:38

vue axios 封装以及api 统一管理

importaxiosfrom"axios";import{Loading}from'element-ui';importqsfrom"qs"axios.defaults.baseURL="http:/

@笨小孩·2020-07-08 21:45

Vue element-UI el-select循环选中问题

Vueelement-UIel-select循环选中问题由于使用el-checkbox-group多选框循环包围着同一个下拉框，导致下拉框选中后无法正常回显@change="$forceUpdate()"这里使用了$forceUpdate()，使其强制更新视图，下面是我的源码{{item.userName}}欢迎各位大佬有好的方法，一起讨论

疯狂的代码奴·2020-07-08 21:51

element-ui表单验证的trigger的值，触发其他的验证

看element-ui给的例子trigger可以取’change’，'blur’等值，但是并不是所有的验证项都可以被这样触发，如何主动控制触发验证呢？可以使用validateField。

weixin_42508745·2020-07-08 20:31

2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）【分配角色】

文章目录1、引言2、分配角色2.1渲染分配角色的对话框并请求角色列表数据2.2渲染角色列表的select下拉菜单2.3完成分配角色的功能3、结束语点击进入Vue❤学习专栏~1、引言寒假是用来反超的！一起来学习Vue把，这篇博客是关于分配角色，请多指教~2、分配角色2.1渲染分配角色的对话框并请求角色列表数据当前用户：{{userInfo.username}}当前角色：{{userInfo.role

一百个Chocolate·2020-07-08 20:43

2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）项目概述篇

文章目录1、引言2、项目概述2.1电商项目基本业务概述2.2电商后台管理系统的功能2.3电商后台管理系统的开发模式（前后端分离）2.4电商后台管理系统的技术选型点击进入Vue❤学习专栏~1、引言寒假是用来反超的！一起来学习Vue把，这篇博客是关于项目概述，请多指教~2、项目概述2.1电商项目基本业务概述根据不同的应用场景，电商系统一般都提供了PC端、移动APP、移动Web、微信小程序等多种终端访问