分类：ElementUI

2020
11-11

在elementui中Notification组件添加点击事件实例

1.官方文档2.添加点击事件，传参handleClick(){lettelNo="1111",message="22222",_this=this;//函数作用域问题this.$notify({title:"通知消息",position:"bottom-right",dangerouslyUseHTMLString:true,message:`<pstyle="cursor:pointer;">号码：<i>${telNo}</i></p>`,duration:0,type:"warning",onClick(){_this.defineCallBack(message);//自定义回调,message为传的参数}});},//点击事件回... 继续阅读 >

2020
11-03

vue+elementUI中表格高亮或字体颜色改变操作

重点的代码：:row-style="setRowStyle"这个属性就是在table标签绑定的:row-style="setRowStyle"//这个方法直接加到methods里就好了，页面会自动调用的setRowStyle(row){if(row.row.isPart==true){return'color:blue;'}},具体代码：hmtl<el-tablewidth="100%":data="gridData"borderfithighlight-current-row:header-cell-style="{background:'#199ED8'}":row-style="setRowStyle"><el-table-columnlab... 继续阅读 >

2020
10-28

基于elementUI竖向表格、和并列的案例

效果图如下代码<template><div><section><el-table:show-header="false":data="tableData":span-method="objectSpanMethod"border:cell-style="columnStyle"style="width:100%;margin-top:20px"><el-table-columnprop="id"label="ID"width="240"><templateslot-scope="scope"><div><img:src="scope.row.id|setPicUrl"/></div></template></el-table-column><el-tabl... 继续阅读 >

2020
10-10

vue+elementUI实现简单日历功能

vue+elementUI简单的实现日历功能，供大家参考，具体内容如下<divclass="calender2"><divclass="date-headers"><divclass="date-header"><div><el-buttontype="primary"@click="handlePrev"><iclass="el-icon-arrow-left"></i>上一月</el-button></div><div>{{year}}年{{month}}月{{day}}日</div><div><el-buttontype="primary"@click="handleNext">下一月<iclass="el-icon-arrow-right"></i></el-... 继续阅读 >

2020
10-10

解决vue2中使用elementUi打包报错的问题

bug1.找不到element-ui/lib/theme-default/index.css解决：修改路径为element-ui/lib/theme-chalk/index.css原因：elementUi升级时遗留bugbug2:ERRORinstatic/js/app.77ab8a3664d32f2b9c76.jsfromUglifyJsUnexpectedtoken:operator(>)[./~/element-ui/src/mixins/emitter.js:2,0][assets/js/0.498ce690b229694d8858.js:3947,32解决：打开build目录下webpack.base.conf.js文件添加{test:/\.js$/i,loader:'babel-loade... 继续阅读 >

2020
10-10

vue elementui tree 任意级别拖拽功能代码

我的是根据父级id做的一些判断<el-treedraggable:allow-drop="allowDrop"@node-drop="sort"accordionstyle="font-size:14px;width:250px;"ref="tree":data="catalogList":props="defaultProps":expand-on-click-node="false"node-key="id":highlight-current="true":load="loadNode"lazy:render-content="renderContent"@node-click="handleNodeClick"empty-text="暂无数据">allowDro... 继续阅读 >

2020
10-09

Vue elementui字体图标显示问题解决方案

问题如下在build/utils.js下找到if(options.extract){returnExtractTextPlugin.extract({use:loaders,fallback:'vue-style-loader',publicPath:'../../'})}else{return['vue-style-loader'].concat(loaders)}加上publicPath:'../../'运行项目还是不行，Failedtodecodedownloadedfont:http://192.168.11.110:8081/dist/static/font路径也是对的网上搜了很多，大部分说是后台经过ma... 继续阅读 >

2020
10-09

vue用elementui写form表单时,在label里添加空格操作

要在密码两字中间添加空格，发现直接添加&nbsp;是识别不了的，正确写法为：代码：<el-form-itemlabel="密码:":label-width="formLabelWidth"prop="password"><labelslot="label">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label><el-inputtype="password"v-model="FormData.password"placeholder="请输入密码"autocomplete="off"show-password></el-input></el-form-item>补充知识：vue+elementUI... 继续阅读 >

2020
10-09

vue+elementUI(el-upload)图片压缩,默认同比例压缩操作

如下所示：这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况，我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储，结合elementUI的el-upload组件实现图片上传功能（简单来说就是用户是老大）1、提取出压缩方法，放在公共方法.js文件里/**图片压缩，默认同比例压缩*@param{Object}fileObj*图片对象*回调函数有一个参数，base64的字符串数据*/exportfunctioncompress(fileObj,callback){try{... 继续阅读 >

2020
10-09

vue+ElementUI 关闭对话框清空验证,清除form表单的操作

前面跟大家提到过elementUI验证的问题，那么今天就来看看点击对话框和关闭按钮怎么清空验证，清空form表单，避免二次点击还会有验证错误的提示1、首先在你的对话框取消按钮加一个click事件，例如：（ps:：callOf里面的addGroupData和ref一一对应起来）<divslot="footer"class="dialog-footer"><el-button@click="callOf('addGroupData')">取消</el-button><el-buttontype="primary"@click="addgroupList('addGr... 继续阅读 >

2020
10-08

elementui更改el-dialog关闭按钮的图标d的示例代码

先给大家展示效果图：先上图<el-dialogtitle="对话框":visible="true"@close="关闭事件()"@opened="打开事件()"class="想来点其他样式">主要是添加一下样式.el-dialog__headerbtn{top:8px!important;background:url('https://你路径资源的url图片')leftno-repeat;background-size:cover;}.el-dialog__headerbtni{content:'修改下面的font-size可以改变图片的大小';font-size:25px;visibility:hidden;}PS：... 继续阅读 >

2020
10-08

解决vue+elementui项目打包后样式变化问题

博主刚刚解决了index.html空白问题，刚打开项目页面又发现了样式出现了大问题，样式与开发版本有很大不同，有些样式没有生效。利用搜索引擎，找到了问题所在以及解决办法：main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可以实现组件样式在第三方样式之后渲染。代码如下：main.js//TheVuebuildversiontoloadwiththe... 继续阅读 >

2020
10-08

Vue+ElementUI 中级联选择器Bug问题的解决

最近在项目中需要用到级联这么个控件，所以便去element上找了个，发现了个问题，在这里跟大家分享下，介于公司项目的隐私性，所以一些文字便给大家打上马赛克了，敬请谅解~不多说废话，直接上问题：ElemenUI的级联是通过子级字段递归进行显示的，但是假如后端老铁也用了递归写的数据，而递归到最后一个数据集便出现了问题，会出现光有字段，但是却没有数据这么个情况在这里插入图片描述这时候就出现了问题：最后一级会多出来一个级... 继续阅读 >

2020
10-08

Vue ElementUI实现:限制输入框只能输入正整数的问题

input输入框中禁止输入小数和负数（*只允许输入正整数*）最近在做项目中碰见了这么个问题，需要输入数字，但是只能输入正整数，在网上找的没找到自己想要的，所以就自己想了两个办法，在这里跟大家分享一下。（因为是刚毕业，第一次写博客，所以有点生疏，请各位大佬担待一些）方法一：利用禁止按键的方法，主要是依靠禁止按下减号以及小数点来完成的首先要监听keyup（键盘按下）事件，因为elementUi上面的input组件监听事件是没... 继续阅读 >

2020
10-08

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

现象：解决方法：1.修改全局css2.只修改局部css.你的tableClass{/deep/.el-table__fixed{height:100%!important;//设置高优先，以覆盖内联样式}}补充知识：解决ElementUI的Table组件固定列，在屏幕刚好够表格显示时，会出现固定列显示不全的问题在使用ElementUI的Table组件中的固定列时，发现当表格刚好显示全，处于临界值状态时，固定列的高度(height)会于表格高度不一致，导致固定列显示不全，出现垂直滚动条。... 继续阅读 >

2020
10-08

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

elementui中提供了点击行处理事件查看位置：elementui的table事件elementui的table中怎样点击某个单元格触发事件？可以先看一下官网中table的自定义列模板代码<template><el-table:data="tableData"borderstyle="width:100%"><el-table-columnlabel="日期"width="180"><templatescope="scope"><el-iconname="time"></el-icon><spanstyle="margin-left:10px">{{scope.row.date}}</span></temp... 继续阅读 >