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 · 1898 阅读 · 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 · 4128 阅读 · 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 · 2178 阅读 · 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 · 746 阅读 · 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 · 6547 阅读 · 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 · 5619 阅读 · 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 · 1937 阅读 · 0 评论 -
elementUI 自定义图标覆盖系统图标
使用自定义图片作为图标替代系统封装好的自带标签的icon。以element的el-collapse折叠面板为例，需要将自带的灰色箭头按钮替换成自定义图片，实现下图效果：element官网所示的效果如下：实现的方法是修改图标类的样式，用图片替换，同时将原来的图标隐藏：.el-icon-arrow-right { background: url(./images/righ...原创 2020-02-07 09:53:57 · 2254 阅读 · 1 评论 -
elementUI中折叠面板箭头图标位置调整
工作中有时设计图要求实现折叠面板需求，element官网给出的示例中，面板展开收起的箭头图标是在最右面，如图所示：但由于设计需要，需要将箭头放在最左边，通过f12代码调试发现header是flex布局，因此修改后的面板部分代码如下：<el-collapse accordion v-model="activeNames" @change="handleChange"> ...原创 2020-02-07 09:27:25 · 19239 阅读 · 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 · 23370 阅读 · 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 · 137 阅读 · 0 评论 -
element ui 兼容低版本浏览器
基于ES6的用Vue框架element ui写的页面，如果当需要解决兼容低版本浏览器时，会遇到在低版本浏览器中不显示效果，页面一片空白，但控制台也不报错，而在高版本可以正常显示的情况。低版本效果：高版本效果：代码片段：<div id="app"> <el-tree :data="data" :props="defaultProps" @node-cli...原创 2019-09-03 16:27:02 · 13586 阅读 · 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 · 601 阅读 · 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 · 1084 阅读 · 1 评论 -
ElementUI问题杂货铺
树通过子节点找父节点handleNodeClick()中this.$refs.tree.getNode(id);获取整个节点的数据，然后this.$refs.tree.getNode(id).parent.data就是当前节点的父节点数据原创 2019-05-17 20:48:17 · 208 阅读 · 0 评论