原因 今天在使用element-ui时，el-input组件监听不了回车事件，如下代码没有想要的效果： <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听，在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现，遇到后可以在网页中查看dom结构分析原因。 解决 在事件后面加上....
前言 众所周知，ElementUI,是一个比较完善的UI库，但是使用它需要有一点vue的基础。在开始本文的正文之前，我们先来看看安装的方法吧。 安装ElementUI模块cnpm install element-ui -S在main.js中引入import ElementUI from element-ui import element-ui/lib/theme-default/index.css全局安装Vue.use(ElementUI)当我们安装完记得重新运行，cnpm run dev ，现在就可以直接使用elementUI了。 vue + element-ui导入导出功能 1.前段后台...
先说结论 在自定义验证里面每一个判断都要有callback(),就是要保证callback()一定会执行到 因为要验证数字，参考了官网参考代码如下，发现有如下图bug，当输入为以数字开头包含字符串的内容时，验证不会报错，因为业务逻辑也不相符，随改写代码 <el-form-item label="年龄" prop="age"><el-input v-model.number="ruleForm2.age"></el-input></el-form-item> var checkAge = (rule, value, callback) => {if (!value) {return call...
饿了么的table组件功能很强大，对于项目中的各种表格基本够用，但是……个人对于它以列为单位的操作不习惯 =。=所以改成了另一种方式（我不会告诉你其实本质没变）。项目中表格较多，所以复用性最重要 步骤一先来个基本的表格展示 官例的tableData tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄 }, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄 }, {date: 2016-05...
前言 本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容，从新建vue项目到引入组件Element介绍的非常详细，下面话不多说了，来一起看看详细的介绍吧。一、新建项目1.查看 node和npm是不是已经安装好命令：node -v npm -v (没有安装的先安装环境);2.npm install -g cnpm --registry=https://registry.npm.taobao.org (安装国内的淘宝镜像文件，后面的安装npm可以全部改为cnpm)3.安装 vue-cli 1、cnpm install -g ...
一、element-ui 1.简介 element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 其设计原则为： 一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 反馈 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作； 页面反馈：操作...
作者背景描述： 本人就职于外资IT企业，担任电商订单处理产品开发经理一职，领导过非常多次大小项目的开发工作，对电商平台订单处理流程非常熟悉。 公司专注鞋服行业相关软件开发和服务，公司规模100多人以上，在台北，广州，成都，上海，北京，国外等均有分公司。 为什么写此系列文章？ 本人在学校至工作到现在十余年时间，使用.net C# 开发语言，结合在公司实际开发，和市场的需求中，NET.开发的商业企业级系统遇到的缺点有如下...
解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法参考文章： （1）解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法 （2）https://www.cnblogs.com/wplcc/p/10944702.html （3）https://www.javazxz.com/thread-2183-1-1.html 备忘一下。
element-ui更新版本后Icon的变化原来在input组件中可以用icon这个属性指定icon <el-input placeholder="请输入用户名" icon="search" v-model="input" :on-icon-click="handleIconClick"></el-input> 现在新版element-ui这样写是不生效的：可以通过prefix-icon 和 suffix-icon 属性在 input 组件的首部和尾部增加显示图标，也可以通过 slot 来放置图标。 <el-input placeholder="请输入用户名" suffix-icon="search" v-mode...
-------------- 模块化相关规范 ------------------ 1.1 模块化概述 传统开发模式的主要问题 命名冲突文件依赖 通过模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 1.2 浏览器端模块化规范 AMD Require.js (http://www.requirejs.cn/)CMD Sea.js (ht...
1. VUE ui 创建项目 2.插件 添加插件3.搜索 vue-cli-plugin-element 并且安装4.选择按需导入 不用全部引用 减小体积 （忘记截图了 网上找了一张 感谢~）5.如图即为安装成功 6.安装完成 启动项目 默认的配置7.使用就类似于组件 先import 引用 再VUE.use(XXX)图中我使用了栅格化布局 和 走马灯（轮播图） 注意不要漏写组件 完毕~
data中的路径只会被当做普通的字符串，因此无法获取图片 data () { return { carousels: [ “…/assets/img/carousel_1.png”, “…/assets/img/carousel_2.png”, “…/assets/img/carousel_3.png”, “…/assets/img/carousel_4.png” ] } } 加上 require（） data () { return { carousels: [ require("…/assets/img/carousel_1.png"), require("…/assets/img/carousel_2.png"), require("…/assets/img/carousel_3.png"), re...
<el-table-columnlabel="用户类型"width="180"><template slot-scope="scope"><el-select v-model="scope.row.roleID"placeholder="请选择" @change="changeRole($event,scope)"><el-optionv-for="item in roles":key="item.value":label="item.label":value="item.value"></el-option></el-select></template> </el-table-column>我想在触发下拉框change事件时获取到scope里的值，因为el-select的change事件默认有个回调参数，就是...
Element-UI日历高度无法缩小… 偶然发现了Vue在引入ElementUI库的日历时无法改变单元格高度的问题，试了半小时没改成。如果直接使用el-calendar-table .el-calendar-day{}去修改高度，似乎并不一定能成功，在网页开发者工具里倒是可以修改height，但放到代码却不能生效，在这里推荐个(估计开发者不推荐的)方法:直接修改源码 软件WebStorm,直接翻.node_modules；搜element-ui,打开lib,打开theme-chalk,找到calendar.cssCtrl+F直接搜...
问题： 使用this.$ref[‘form‘] .resetFields()无法重置表单项 原因： 1.没有给表单添加ref属性<el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致<el-form ref="form" :model="sizeForm" label-width="80px" size="mini"> <el-form-item label="活动名称" prop="name"> <el-input v-model="sizeForm.name"></el-input> </el-form-item> </el-form> 3.还有一个经常出现这...