分类：elementUi

2022
05-27

Vue之ElementUI Form表单校验

表单校验是前端开发过程中最常用到的功能之一，根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明。以下是form的demoel-form:model="dynamicValidateForm"ref="dynamicValidateForm"label-width="100px"class="demo-dynamic"><el-form-itemprop="email"label="邮箱":rules="[{required:true,message:'请输入邮箱地址',trigger:'blur'},{type:'email',message:'请输入正确... 继续阅读 >
2021
09-10

Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐) 目录如何运用vue+echarts前后端交互实现动态饼图前言一、环境配置1.1安装acharts1.2全局引用二、圆环图前端实现 2.1先在vue页面添加渲染盒子2.2前端逻辑实现部分2.3展示（可按自己需求更改前端样式）三、前后端数据交互实现3.1创建数据库3.2后台代码的编写如何运用vue+echarts前后端交互实现动态饼图前言我们做项目的时候，常常需要一些统计图来展示我们的数据，作为web开发人员，会实现统计图是我们必会的技能。我将... 继续阅读 >
2021
07-22

Vue中ElementUI分页组件Pagination的使用方法

Vue中ElementUI分页组件Pagination的使用方法 Vue中ElementUI分页组件Pagination的使用，供大家参考，具体内容如下一、概要ElementUI提供了el-pagination组件，只要配置相应得参数和事件，即可实现分页。二、实现1、基本用法<divclass="pagination"><el-paginationbackgroundlayout="total,sizes,prev,pager,next,jumper":current-page="tablePage.pageNum":page-size="tablePage.pageSize":page-sizes="pageSizes":total="t... 继续阅读 >
2021
06-23

详解Vue ElementUI手动上传excel文件到服务器

目录概述属性设置处理逻辑概述具体需求场景如下：选择excel文件后，需要把导入的excel文件手动上传到后台服务器，并将导入成功后的统计结果显示出来。官网也有手动上传的示例，通过action="url"传入地址的方式，但在实际项目中请求需要自己配置，下面具体说明实现的方法。说明：在上传文件到展示统计结果，我们后端给了两个接口：首先调用文件上传接口，上传成功后，根据后端返回的mark再调用统计结果接口。属性设置.vue文件<el-... 继续阅读 >
2021
06-23

总结Vue Element UI使用中遇到的问题

基于vue2.0的element-ui框架，使用起来还是很方便的，非常适合快速开发，但是在做自己的项目中还是会碰到这样那样的问题，有些问题官方文档并不是很详尽，以下是我在使用element-ui过程中一些常用的或碰到的一些问题笔记。一、DateTimePicker日期选择范围为当前时间以及当前时间之前<template><div><el-date-pickersize="small"clearable:picker-options="pickerOptions"... 继续阅读 >
2021
05-23

vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航

vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航 早就实现了功能，但是发现点击的时候，选中的菜单项背景色会变白，周五时候仔细观察了一下，发现并不是调整样式的问题，而是选项没有被选中，于是好好研究了一下组件递归这块，总结记录一下心路历程一、概念递归：递归其实说白了，就是自己调用自己，样子就像是套娃一个套一个的，小时候玩过一个游戏汉诺塔就是利用的递归原理：函数递归：函数利用函数名还调用自己组件递归：所以组件递归利用的是vue组件中的name属性来实现的二、... 继续阅读 >
2021
03-16

基于ElementUI中Table嵌套实现多选的示例代码

前言：写这个是因为帮朋友修改项目中的bug我也是第一次写这个功能，有不对的希望大家指正，如果看完有帮助点个赞！代码中关键是js中Tree的路径查找这个核心，有不懂的自行百度多了不说了，有需要的可以私信找我要代码，来看下我怎么实现的思路：从头开始看这个需求，我们需要知道用到哪写东西1、表格Table2、多选&全选3、嵌套数据（下拉操作）正好我们可以找下ElementUI官方文档找到了我们需要用到的API在嵌套数据的时候需要使用... 继续阅读 >
2021
01-08

vue+elementui通用弹窗的实现(新增+编辑)

本文主要介绍了vue+elementui通用弹窗的实现(新增+编辑)，分享给大家，具体如下：组件模板<el-dialog:title="title":visible.sync="dialogShow":close-on-click-modal="false"><divclass="ym-common-dialog":class="customClass"><divv-for="(col,index)incols"><span><emv-if="!!col.isRequire">*</em>{{col.name}}</span><templatev-if="col.type==='text'"><div>{{submitData[col.key]}}... 继续阅读 >
2020
12-29

elementui实现预览图片组件二次封装

起因在elementui组件库中，el-image组件有个预览图片功能，比较简洁，但是和图片绑定在一起，我们只想要一个单纯的预览组件，传递一个图片，通过事件方式，显示大图分析通过查看elementui的代码，发现在image（el-image组件）目录中里面有一个image-viewer组件,el-image组件的预览功能也是通过这一个组件实现的，只是官方没有把这个组件单独暴露出来这里就比较简单了，我们可以使用手动导入组件的方式，引入image-viewer组件image... 继续阅读 >
2020
12-29

解决elementui表格操作列自适应列宽

解决elementui表格操作列自适应列宽 业务需要前端根据用户权限动态显示对应按钮，直接把操作列的列宽写死的话，在按钮少的情况下不是那么好看，所以想到了一个骚操作...写死宽度时是这样的：开始给操作列绑定宽度属性:width="actionColWidth<80?80:actionColWidth"把操作列的所有按钮用一个div套起来class="action-col"<divclass="action-col"><el-button></el-button>...</div>data里设置列宽初始值actionColWidth:80,//表格操作列宽度在表格数据请求... 继续阅读 >
2020
12-02

Vue3+elementui plus创建项目的方法

1.使用elementuiplus版本实现按需加载组件会报错Error:Cannotfindmodule'babel-preset-es2015'from'D:\danzhukeji\danzhu\my_pp\src'这样的情况下{"presets":[["es2015",{"modules":false}]],"plugins":[["component",{"libraryName":"element-plus","styleLibraryName":"theme-chalk"}]]}换成下面这样无需安装任何插件依赖即可{"presets":[["@babel/preset-env",{"module... 继续阅读 >
2020
11-29

Vue项目如何引入bootstrap、elementUI、echarts

引入bootstrap安装依赖包cnpminstallbootstrap--save-devcnpminstalljquery--save-devcnpminstallpopper.js--save-dev全局引入在项目中根目录下的main.js中添加如下代码：import'bootstrap'import$from'jquery'在vue文件中引用<script>import'bootstrap/dist/css/bootstrap.min.css'import'bootstrap/dist/js/bootstrap.min.js'</script>引入elementUI安装elementUI打开终端，输入以下内容npmielement-ui-S全局... 继续阅读 >
2020
11-22

vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例

这次封装基于vuecli3+typescript实现，javascript也是同理，没有区别；自定义插件有助于我们可以将一些页面交互封装并在js或ts文件中引入实现，而不是只在.vue文件。1、实现toast插件封装（类似简易版的elementUi的message）先书写一个toast组件<template><divref="toastRef"class="toastMessageBox">{{message}}</div></template><scriptlang="ts">import{Component,Vue,Watch}from'vue-property-de... 继续阅读 >
2020
11-19

解决vue elementUI 使用el-select 时 change事件的触发问题

解决vue elementUI 使用el-select 时 change事件的触发问题 如下所示：<el-selectv-model="level"size="mini"placeholder="请选择":change="selectChange()"><el-optionv-for="iteminselect":key="item.value":label="item.label":value="item.value"></el-option></el-select>我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，应该用@change="selectChange()<el-selectv-model="level"size="min... 继续阅读 >
2020
11-11

VUE-ElementUI 自定义Loading图操作

VUE-ElementUI 自定义Loading图操作 需求：elementuiloading图只能使用自己的loading图，但很多场景下，需要替换成自己的gif图虽然文档中有些，element-loading-spinner="el-icon-loading"可指定自定义图但经测试，也只是只能再elementui图标库中的图，不是我们想的那个自定义图类的意思。自定义图方法：1）添加自定义elementUIloading样式asserts下新建CSS文件夹及CSS文件比如myCss.css再里面，写入自定义的element类CSS样式.el-loading-spinner{/*这个... 继续阅读 >