![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ElementUI
菜鸟圈大当家
这个作者很懒,什么都没留下…
展开
-
使用element-ui控制台报错el-progress:Invalid prop: custom validator check failed for prop “percentage“
消除掉控制台报错的方法:添加v-if判断<el-progress type="line" :percentage="scope.row.duration" class="device-progress" :show-text=false v-if="!isNaN(parseInt(scope.row.duration))"></el-progress>原创 2020-07-06 09:58:30 · 1839 阅读 · 0 评论 -
element Carousel 走马灯使用
隐藏指示器<el-carousel trigger="click" indicator-position="none" height="150px">...</el-carousel>取消自动切换<el-carousel trigger="click" height="150px" :autoplay=false>...</el-carousel>原创 2020-05-26 19:57:24 · 3310 阅读 · 0 评论 -
Vue实现通过数据找到对应的DOM节点
利用Vue实现搜索功能已知搜索框获取到的输入值,匹配页面中的节点,找到当前搜索值对应的DOM节点,并且给当前DOM节点添加class或者样式进行高亮显示。el-input部分代码:<el-input placeholder="输入关键字" v-model="searchVal" @keyup.enter.native="onEnterSearch($event,searchVal)"...原创 2020-04-26 14:38:08 · 2095 阅读 · 0 评论 -
ElementUI 自定义表头和对应列
ElementUI自定义表头和对应列<el-table-column prop="time" min-width="30%" align="center"> <template slot="header" slot-scope="scope"> <div class="table-header"> <img src="<%=pat...原创 2020-04-09 11:37:34 · 692 阅读 · 0 评论 -
element table表格去掉白边的方式
el-table使用:gutter属性时,在表格中会出现border错位,出现白边的现象,解决方式如下:body .el-table th.gutter{ /*解决el-table加了gutter后 边框出现白边*/ display: table-cell!important; }...原创 2020-03-30 14:36:34 · 6374 阅读 · 0 评论 -
vue鼠标移入移出动态设置图片src路径实现两种图片效果切换
使用vue实现,当鼠标移入和移出时,两种图片切换显示。项目情况:菜单上的图片的src的相对路径从后台icon字段中动态去找到并加载。html代码:<el-menu> <el-menu-item v-for="child1 in resultData" v-if="!child1.child|| child1.child.length ==0" ...原创 2020-03-21 17:27:34 · 5459 阅读 · 0 评论 -
element根据后台返回的数据动态加载表单及对应的验证规则
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-03-10 19:24:00 · 1804 阅读 · 0 评论 -
elementUI 自定义图标覆盖系统图标
使用自定义图片作为图标替代系统封装好的自带标签的icon。以element的el-collapse折叠面板为例,需要将自带的灰色箭头按钮替换成自定义图片,实现下图效果:element官网所示的效果如下:实现的方法是修改图标类的样式,用图片替换,同时将原来的图标隐藏:.el-icon-arrow-right { background: url(./images/righ...原创 2020-02-07 09:53:57 · 2123 阅读 · 1 评论 -
elementUI中折叠面板箭头图标位置调整
工作中有时设计图要求实现折叠面板需求,element官网给出的示例中,面板展开收起的箭头图标是在最右面,如图所示:但由于设计需要,需要将箭头放在最左边,通过f12代码调试发现header是flex布局,因此修改后的面板部分代码如下:<el-collapse accordion v-model="activeNames" @change="handleChange"> ...原创 2020-02-07 09:27:25 · 18888 阅读 · 3 评论 -
element el-progress渐变色进度条
根据状态加载不同渐变色的进度条及百分比数值<el-progress type="line" :percentage="scope.row.progress" :class="scope.row.status|showProgressColor"> {{scope.row.progress}}</el-progress>css:.el-progress{ wi...原创 2020-01-08 15:37:42 · 22090 阅读 · 10 评论 -
前端浏览器兼容解决办法
let 改为var箭头函数()=>{}改为fucntin(){}a()改为a:fucntion(){},vue中mounted也要改多余的逗号element UI 组件。 比如:树形里的scope={node,data},全部使用scope='node', 里面全使用node.data.labela=>{a+1} 改为 funciton(a){return a+1}字符串...原创 2019-11-28 14:51:28 · 109 阅读 · 0 评论 -
element ui 兼容低版本浏览器
基于ES6的用Vue框架element ui写的页面,如果当需要解决兼容低版本浏览器时,会遇到在低版本浏览器中不显示效果,页面一片空白,但控制台也不报错,而在高版本可以正常显示的情况。低版本效果:高版本效果:代码片段:<div id="app"> <el-tree :data="data" :props="defaultProps" @node-cli...原创 2019-09-03 16:27:02 · 13218 阅读 · 0 评论 -
element ui tree树节点数据平面化
有时候需要对树节点进行增删改查,因此需要快速找到要操作的这个节点。将label,children格式的数据平面化处理后,可以根据id等唯一标识字段快速定位节点,随后对其操作。数据平面化操作:function GetFlatData(arr1) { arr1=arr1||[]; var array = []; $.each(arr1, function (i, item) { ...原创 2019-09-02 15:38:40 · 553 阅读 · 0 评论 -
element-ui checkbox树,选中后再二次生成新树
树形结构代码:<div class="modal-body" style="height:350px"> <div class="fileTree"> <el-tree v-cloak show-checkbox default-expand-all node-key="id" ref="tree" @node-click="handl...原创 2019-08-20 16:43:07 · 1014 阅读 · 1 评论 -
ElementUI问题杂货铺
树通过子节点找父节点handleNodeClick()中this.$refs.tree.getNode(id);获取整个节点的数据,然后this.$refs.tree.getNode(id).parent.data就是当前节点的父节点数据原创 2019-05-17 20:48:17 · 116 阅读 · 0 评论