我使用的是element-ui V2.2.3。代码如下，当我选择值得时候，el-select选择器无法显示选中的内容，但是能触发change方法，并且能输出选择的值。select.vue文件 <template><div><div class="row" v-for="RowItem in rows"><div class="col" v-for="colItem in RowItem.configVos"><el-select v-model="formData[colItem.paramCode]" :class="getModel(colItem.paramCode)" @change="onSelectChange(colItem.paramCode,formData[colI...
element-ui对话框可拖拽及边界处理应业务需求，需要实现对话框可拖拽问题，应element-ui没有提供官方支持，于是便参考大神的文章，得出了适合业务需要的解决方案。很多大神给出的代码是没有解决边界问题的，但是不解决边界问题存在一个bug，拖到不可视区域后边再也拖不回来了，不信你们可以试试。在实现的功能的情况下，封装成了js文件，然后再main.js中引入后可全局使用。还是上代码吧 功能实现代码directives.js代码如下： impor...
element-ui 中验证 一、简单逻辑验证（直接使用rules） 实现思路 ?html中给el-form增加 :rules="rules" ?html中在el-form-item 中增加属性 prop="名称" ?js中直接在data中定义rules:{} ?html部分 <el-form ref="form" :rules="rules" :model="form" label-width="300px"><el-form-item label="发货地址：" prop="fAdderss"><el-input class="inp" v-model="form.fAdderss" auto-complete="true"></el-input><el-button type="prima...
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？element-ui虽然没有直接提供图片悬浮放大的组件，但是可以使用Popover弹出框组件，一样实现效果，如下：具体的代码（此处只是图片单元格的代码，其它代码省略）： <el-table-columnprop="picture"header-align="center"align="center"width="150px"label="图片"><temp...
在vue2.0中引用element-ui组件库 element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库。 官网： http://element.eleme.io/ 安装 npm i element-ui -S引用完整的element-ui import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css; Vue.use(ElementUI);需要注意的是，样式文件需要单独引入。 如果报错，在 webpack.config.js 中配置 file_loader。可以在 rules 数组内直接增加下面这个配置项：...
在vue构建的项目中，我们常用element-ui插件，在我的博客前面有讲述，具体怎么用vue-i18n插件进行国际化开发，但是在前面博客中，如果项目中使用了element-ui插件，插件中的语言文字替换可以结合element-ui插件一同进行。element-ui插件自身也提供了语言包。具体的配置和使用方法参考如下： 默认你已构建好了一个vue项目，在vue项目中安装vue-i18n以及element-ui插件 cnpm i vue-i18n --save-dev cnpm i element-ui --save-dev 在...
公司有一个新的需求，点击ElTableColumn的头部可以进行搜索，这个功能同事已经做出来了，但是使用有些不方便，自己就打算封装成一个组件，学习一下。ElTableColumn本来是这个样子的：要做成的是这个样子：我直接就放代码了，挨着挨着说明太多了。 代码的结构：组件 <!-- ElTableColumnPro.vue --> <template><el-table-column v-if="visible" :formatter="formatter" :align=align :prop="prop" :header-align="headerAlign" :labe...
element-ui组件的tree树形控件修改源码改为iview组件 实现原理修改了element-ui源码，把源码里面的tree模块提取出来然后修改element自带checkbox等组件为iview的checkbox，并且兼容方法最后修改element样式，改为iview风格，自己也添加了一些样式 新的tree组件可以说是element的逻辑，iview的风格 <template><div@click.stop="handleClick"v-show="node.visible"><div class="chu-tree-node__content":style="{ padding-left: (nod...
解决办法： <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可。 以上这篇vue element-ui 绑定@keyup事件无效的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
前端工作中，经常需要图片裁剪的场景，cropper.js是一款优秀的前端插件，api十分丰富。 本文是在vue-cli项目下封装图片裁剪插件，效果图如下：话不多说，看步骤吧。 第一步：准备开发环境 cropper.js是基于jquery的，所以要先安装jquery 执行命令： npm install --save-dev jquery cropper 为webpack配置添加jquery的映射 修改webpack.base.conf.js配置，添加标红的一行第二步：新建图片裁剪组件index.vue内容： 由于用了eleme...
html代码 因为我写在template中，也就是新建了组建中，贴出代码。 <el-pagination smalllayout="prev, pager, next":total="total" @current-change="current_change"> </el-pagination>代码中，small代表是否使用小型分页样式 layout代表组件布局，子组件名用逗号分隔 属性： total代表总条目数 事件： current-change用于监听页数改变，而内容也发生改变 其他属性可参见element官方API http://element.eleme.io/#/zh-CN/componen...
添加全局注册事件，用来监听滚动事件 window.Vue.directive(loadmore, {bind(el, binding) {const selectWrap = el.querySelector(.el-table__body-wrapper)selectWrap.addEventListener(scroll, function() {let sign = 100const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeightif (scrollDistance <= sign) {binding.value()}})} }) sign 用于标记位置 直接让scrollDistance === sign 并不能保证每次都...
最近了解到Vue.js挺火的，有同学已经学习了，那我心里痒痒的也学习了一点，然后也学了一点Element组件，就做了简单的登录页面。 效果很简单：代码如下： 前端页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="//unpkg.com/element-ui@1.3.6/lib/theme-default/index.css" rel="external nofollow" > <script type="text/javascript" src="vue/dist/vue....
一、安装npm镜像 （1）下载node.js， 配置node.js的环境变量 检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入"cmd" => 输入命令"path" 检查Node.js版本在命令窗口输入：npm install -g cnpm –registry=https://registry.npm.taobao.org二、安装全局vue-cli（1）npm install -g vue-cli 回车，验证是否安装成功，在命令行中输入vue，出来vue的信息说明安装成功 三、全局安装 vue-cli （1）npm install --global vue-cl...
本文介绍了vue项目中使用element-ui的Upload上传组件的示例，分享给大家，具体如下：<el-uploadv-elseclass=ensure ensureButt:action="importFileUrl":data="upLoadData"name="importfile":onError="uploadError":onSuccess="uploadSuccess":beforeUpload="beforeAvatarUpload"><el-button size="small" type="primary">确定</el-button>其中importFileUrl是后台接口，upLoadData是上传文件时要上传的额外参数，uploadError是上传...