分类：Element-ui

2021
10-15

element-ui 上传图片后标注坐标点

什么是element-ui   element-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js2.0的桌面组件库，而手机端有对应框架是MintUI。整个ui风格简约，很实用，同时也极大的提高了开发者的效率，是一个非常受欢迎的组件库。页面大概如下：组件使用的是layui的layer.open弹框。左边是表单信息，右边是绘图区域。原文件mapForm.vue<template><divclass="mapForm"><divclass="l... 继续阅读 >

2021
05-20

详解Element-ui NavMenu子菜单使用递归生成时使用报错

当采用递归方式生成导航栏的子菜单时，菜单可以正常生成，但是当鼠标hover时，会出现循环调用某个（mouseenter）事件，导致最后报错处理方式注：2.13.2版本，只需对子菜单设置属性:popper-append-to-body="false"就不会出现这个问题了报错信息如下：UncaughtRangeError:Maximumcallstacksizeexceeded.   atVueComponent.handleMouseenter(index.js:1)   atinvokeWithErrorHandling(v... 继续阅读 >

2021
02-01

Element-ui 自带的两种远程搜索(模糊查询)用法讲解

问题描述有一种查询叫做前端远程搜索、模糊查询。饿了么自带两种方式可以做，一种是使用el-input中的el-autocomplete，另一种是使用el-select和el-option。这两种都可以选择，但是具体实现的思路方式要和后端商量。模糊查询是谁来做？如果后端做那么前端只需要把用户在输入框中的输入的关键字扔给后端，后端根据前端传过来的用户要查询的关键字，去数据库中进行模糊查询，查到的关联的数据扔给前端，前端拿到数据以后直接呈现给用... 继续阅读 >

2021
01-22

element-ui 弹窗组件封装的步骤

封装el-dialog为一个组件我们在使用element-ui的时候，如果一个弹窗中的内容很多，那么我们经常会把这个弹窗封装成一个组件，如下：<!--DetailDialog.vuehtml--><template><el-dialogtitle="标题":visible.sync="visible"width="720px"><p>弹窗内容</p></el-dialog></template>//DetailDialog.vuejs<script>props:{visible:{type:Boolean,default:false}}</script>el-dialog会修改props，并报错但是... 继续阅读 >

2021
01-08

基于element-ui封装表单金额输入框的方法示例

在日常的迭代开发中通常我们会遇到这样的场景：在一个表单中需要用户输入金额，并校验金额的格式。这个需求你一定遇到过，但是现在，我们还需要做到：当用户离开输入框（失去焦点）时，输入的内容变成了用逗号每隔3位分隔的数字，并展示给用户。且最后提交金额时，参数的值仍然是正常数字，不包含逗号。遇到这种需求，我们首先要想到「表单中的金额输入框」是常见到的功能。既然是常见的功能，我们要将它抽象封装起来，做到随时... 继续阅读 >

2020
11-19

elementUI同一页面展示多个Dialog的实现

要实现的效果如下：首先官方文档是这样描述的：但是我写了个小demo发现并不能直接平级放置即可，一样会存在先后顺序不同造成的覆盖以及遮罩层导致不能点击被遮盖的dialog。原因如下：因为dialog先后顺序不同z-index设置的层级不同，所以必定会覆盖遮挡那么我们要实现一个这样的效果不仅仅平级放置即可，就要用到里面的一个属性：modal下面贴上代码：总的思路就是：dialog先后顺序重叠问题，使用便宜去让它们错开；然后就是遮罩层导... 继续阅读 >

2020
11-11

vue 实现element-ui中的加载中状态

需要添加加载状态，调用下面方法即可//开启loadingconstload=_this.$loading({lock:true,text:'Loading',spinner:'el-icon-loading',background:'rgba(0,0,0,0.7)'});//关闭loadingload.close();补充知识：在vue中使用element-ui里面的按钮点击后显示加载中，防止重复提交第一步：第二步：第三步：效果以上这篇vue实现element-ui中的加载中状态就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多... 继续阅读 >

2020
11-08

解决element-ui的下拉框有值却无法选中的情况

问题描述：在使用Vue框架和element-ui开发时，下拉框遇见一个问题，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，也就是下拉框值无法选中。（踩坑踩得莫名其妙）代码段：<el-selectv-model="value"placeholder="请选择"@change="change()"><el-optionv-for="iteminoptions":key="item.value":label="item.label":value="item.value"></el-option></el-select>解决方法... 继续阅读 >

2020
11-08

解决VUE项目使用Element-ui 下拉组件的验证失效问题

问题描述：在使用Element-ui组件做项目开发时候有可能会使用下拉框组件,如果下拉框组件的option选项是使用v-if指令遍历的,这样也没有问题,但是如果加上multiple属性,也就是可以多选就会出现下拉框验证时失效问题.问题现象：如图所示,明明已经选择了选项,可是验证还是为空,因此不能提交请求解决思路：如果说找遍组件里的方法都无法获得我们适合使用的,那就要动用原生基本功了console.log一下v-model在此组件上绑定的属性,你发现你... 继续阅读 >

2020
11-03

vue element-ui中table合计指定列求和实例

注意点：1.<el-table>中加:summary-method="getSummaries"2.<el-table-column>中要加prop//房间号的合计去掉getSummaries(param){const{columns,data}=paramconstsums=[]columns.forEach((column,index)=>{if(index===0){sums[index]='总计'}elseif(index===5||index===6){constvalues=data.map(item=>Number(item[column.property]))if(!values.every(value=>i... 继续阅读 >

2020
10-28

Element-UI 使用el-row 分栏布局的教程

使用多个卡片显示的时候，并且要求当列数到一定数目的时候，要自动换行，el-container布局就满足了需求了，就要用到el-row布局做分栏处理，代码如下<template><el-row:gutter="20"class="el-row"type="flex"><el-col:span="8"v-for="(item,index)inapps":key="item.id"class="el-col"><el-cardclass="el-card":key="index"onclick=""><divslot="header"class="clearfix"><span>{{item.appname}}</spa... 继续阅读 >

2020
10-10

element-ui中dialog弹窗关闭按钮失效的解决

如下所示：<el-dialogtitle="修改库存":visible.sync="kcDialog"@close="kcDialog=false">...</el-dialog>加一个@close可以是一个方法或者直接操作kcDialog为false补充知识：webpack外部扩展，依赖前置引入了外部jsindex.html<scriptsrc="https://code.jquery.com/jquery-3.1.0.js"integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="crossorigin="anonymous"></script>js中import$from'jquery'这时候会... 继续阅读 >

2020
10-10

仿照Element-ui实现一个简易的$message方法

前言在需要对用户进行提示时，有时会遇到这种场景：使用模态框提示太过硬核，使用toast提示又太轻了，这时候可以选择使用页面顶部滑下的消息提示。本文仿照element-ui的实现一个类似$message的方法。思路梳理首先我们来看下element-ui中消息提示的效果是怎么样的，找些思路。从图中我们可以看消息提示是可以同时显示多条的，并且定位看起来都是fixed，居中展示，我们自然可以想到使用数组来存储这些消息的信息，并且根据每一条提示... 继续阅读 >

2020
10-10

Vue-cli4 配置 element-ui 按需引入操作

在按照element-ui文档和网上各个文章的描述方式都未能正确配置出按需加载的功能。经小编一番摸索之后，终于搞定了，本篇文章记录实现的全过程#1node与vue的版本情况#2未按需加载打包后的文件情况由上图看出，只是引入了element-ui框架后，js文件急剧的上升到了783KB，这显然是不能接受的。element-ui按需加载文档：https://element.eleme.cn/#/zh-CN/component/quickstart#3添加babel-plugin-component依赖#4正确配置按... 继续阅读 >

2020
10-10

element-ui和vue表单(对话框)验证提示语(残留)清除操作

问题是这样的：如果一个页面有多个按钮打开相同的element-ui的Dialog对话框，那么如果第一个点击"顺序"按钮出现红色验证提示语后，再点击“取消”，或者点击页面空白处此对话框消失，而后再点击同一个“顺序”按钮亦或别的“顺序”按钮，那么此红色提示依然存在，显然是无法忍受的，那么怎么去除呢，这里也用到一个vue的一个语法watch，从字面意思上理解就是起到监控的作用，监控这个diaLog对话框的打开和关闭。在“代码一”... 继续阅读 >

2020
10-10

基于element-ui对话框el-dialog初始化的校验问题解决

不刷新页面重新打开el-dialog时，如果我们绑定了rules或者某个值需要required，它总会自动校验。查看了多个博文，发现常用的有两种解决方法(下列方法都可以在其他博文查看，不再细写，如有需要请自行查询)：1.给dialog套上v-if；2.在关闭dialog时,监听关闭回调,清除校验。我在自己的项目里使用了上述两种方法，都不太好用，自己琢磨出了另一种方法：<el-dialog@open="openDialog()"></el-dialog>调用dialog打开的回调methods:op... 继续阅读 >