分类：Element

2022
11-02

Element表格表头行高问题解决

目录前言一、问题原因二、解决方法Vue修改elementUItabletrth的高度，以及背景颜色前言在最近一个项目的后台管理系统中，写前端界面时用到了ElementUI，但是发现导入数据表格之后表头的高度一直很高，如下图所示：在网页上搜索了很多的解决办法，都没有作用。后来折磨了一段时间后解决了这个问题，在此进行记录。提示：以下是本篇文章正文内容，下面案例可供参考一、问题原因在网页中检查代码时发现没有style来设置表格表头... 继续阅读 >

2022
10-08

使用Element+vue实现开始与结束时间限制

本文实例为大家分享了用Element+vue实现开始与结束时间限制的具体代码，供大家参考，具体内容如下效果<el-form-itemlabel="开始时间"><el-date-pickerv-model="startDate"type="datetime"placeholder="选择日期"format="yyyy-MM-ddHH:mm:ss"value-format="timestamp":editable="false":picker-options="pickerOptionsStart"@change="change... 继续阅读 >

2022
07-11

Element 头像上传的实战

本篇文章用到element官网和七牛云官网element-ui官网：https://element.eleme.io/#/zh-CN七牛云官网：https://www.qiniu.com/1.七牛云注册登录之后然后实名认证2.进入对象存储后进入空间管理3.新建空间在这里就能拿到cdn测试域名pythonSDK在开发者中心可以查看使用七牛云就需要安装他pipinstallqiniu我们使用封装的思想进行封装使用文件名：comm.py#七牛云fromqiniuimportAuth#需要填写你的AccessKey和Sec... 继续阅读 >

2022
05-27

使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

目录一.参考文档二.vite搭建项目三.配置element-ui四.配置vue-router五.配置vuex安装六.配置axios七.总结一.参考文档vite官方文档vue3.x官方文档vue-router4.x官方文档vuex4.x官方文档element-ui3.x官方文档AntDesignVue2.x官方文档axios文档二.vite搭建项目安装#npm安装npminitvite@latest#yarn安装yarncreatevite#快速安装vue模板项目yarncreatevitemy-vue-app--templatevuenpminitvite@latest... 继续阅读 >

2022
03-03

浅谈element的$notify注意点

我的初衷是把element-ui的$notify通知封装成一个组件，登录成功后调用获取低库存接口，如果获取接口的列表当中库存大于0，则显示这个通知，并且在文本当中提供点击事件。因此，首先想到的就是使用dangerouslyUseHTMLString属性，可以插入html字符串exportdefault{methods:{open12(){this.$notify({title:'HTML片段',dangerouslyUseHTMLString:true,message:'<strong>这是... 继续阅读 >

2022
03-03

ElementUI的this.$notify.close()调用不起作用的解决

目录需求描述问题描述问题分析问题解决问题拓展需求描述项目首先要用户选择某个问题，选择之后使用ElementUI的Notification组件提示用户正在对文件格式进行检查（需要先提交给后端，交给后端检查，再返回结果给前端）。如果格式检查无误，则关闭Notification，弹出一个MessageBox（也是ElementUI的组件），告知用户上传文件之后不可撤销。问题描述在检查文件格式是否正确之后，需要手动调用相关函数，把Notification去掉。根据官方... 继续阅读 >

2021
12-13

Element实现动态表格的示例代码

目录【代码背景】【代码实现】#1#->代码复用的基础是你需要一个可复用的组件#2#->在展示页面使用动态表格组件#3#->如何给动态表格根据需求动态添加序号列/索引列【代码背景】有这样一个业务需求场景，有大概十几张表归属于某个类别，用户希望在同一个页面，通过选择不同的查询指标展示不同的表格，这些表的表头样式类似但是又不完全相同，怎么做呢？到目前为止所有基于ElementUI的表格样式都是直接在页面写死的，像官方这样... 继续阅读 >

2021
11-01

ElementUI实现el-form表单重置功能按钮

目录业务场景：效果演示:业务场景：使用el-form时，点击重置按钮或者取消按钮时会实现表单重置效果。重置功能按钮功能实现详细步骤:第一:首先给el-form添加ref属性。<el-form:inline="true":model="queryParams"ref="queryForm">第二：在点击重置按钮执行的方法中，执行如下功能代码片段reset(){#重新设置请求参数实体属性this.queryParams={memberName:undefined,typeId:undefined,... 继续阅读 >

2021
10-29

Element Plus实现Affix 固钉

目录一、组件介绍二、源码分析2.1template2.2script2.3实现总结：一、组件介绍Affix组件用于将页面元素固定在特定可视区域。1.1属性position：指定固钉的位置，可设置为top或bottom，默认为topoffset:设置偏移距离，默认为0target：指定容器（CSS选择器），让固钉始终保持在容器内，超过范围则隐藏，默认的容器是document.documentElement。z-index:固钉的层级，默认1001.2事件scroll：容器滚动时触... 继续阅读 >

2021
09-28

vue+element ui实现锚点定位

本文实例为大家分享了vue+elementui实现锚点定位的具体代码，供大家参考，具体内容如下vue<el-row:gutter="20"><el-col:span="3"><!--导航选择事件--><el-menu:default-active="activeStep"@select="jump"><el-menu-itemv-for="(item,index)inmenuData":index="`${index}`":key="item.subjectId"><iclass="el-icon-menu"></i><spanslot="title">{{item.subjectName}}</span></el-... 继续阅读 >

2021
08-06

element的表单元素使用总结

表单元素挺多的，这里简单总结下，我以我的方式主要分为：文本框类、选择类、其他类文本框类选择类其他类TL;DR时间类的选择器，均可设置输入框的显示样式和值的形式，属性分别为format、value-format单选框和复选框，选中项属性的label值就是model的值复选框，如果是多选的话，务必设置model值是数组文本框类这里我统一将有文本框的元素放在一起。主要有：普通文本框、密码框、文本域、计数器、日期选择器... 继续阅读 >

2021
07-21

element多个表单校验的实现

在项目中，经常会遇到表单检验，单个表单检验可查看element的官网文档，里面有详细的介绍。在这里我分享在实际项目中遇到多个表单同时进行校验以及我的解决方法，欢迎大家留言，一起探讨相关技术，请多多指教。这里主要用到Promise来解决。关于Promise方法举个例子来抽象理解：周末想吃火锅，打电话告诉小A，过来我这打火锅，菜都齐了，就差点海鲜，你来的时候带点。接着打电话找朋友小B，过来我这打火锅，有海鲜，肉少了点，你... 继续阅读 >

2021
07-04

Vue Element UI自定义描述列表组件

本文实例为大家分享了VueElementUI自定义描述列表组件的具体代码，供大家参考，具体内容如下效果图写在前面写后台管理经常从列表点击查看详情，展示数据信息，ElementUI虽然有表格组件，但是描述组件并没有，之前团队的成员遇到这种情况都自己去写样式，写起来也麻烦，而且每个人写出来的样式也不统一，破坏了项目的整体风格。像是AntDesignUI就有描述组件，用起来特别舒服，所以索性自己结合ElementUI的el-row和el-col自己... 继续阅读 >

2021
07-02

element的el-tree多选树(复选框)父子节点关联不关联

属性check-strictly官方文档提供属性check-strictly，在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为false。而此属性的意思是：默认false，父子关联。有如下现象及问题：1、当你通过函数设置勾选节点的时候，只要父节点被勾选子节点必会勾选上，即便设置勾选的list中无此子节点。2、当你点击勾选复选框时候，若点击父节点，其下子节点全部统一跟随父节点变化；若点击子节点，子节点部分勾选时父节点处于半选... 继续阅读 >

2021
07-01

Vue Element前端应用开发之功能点管理及权限控制

目录概述1、权限功能点管理2、VUE+Element前端权限控制概述本篇随笔介绍功能点管理及权限控制，功能点是作为一个业务对象数据进行管理，在角色范畴上进行分配，而在界面元素控制上，VUE+Element前端引入Vue自定义指令Directives进行控制。1、权限功能点管理我们在前面分析过一个权限系统的表和关系的说明，如下所示。权限功能点的管理就是对TB_Function的表的管理操作，这个表是我们定义用于系统控制的功能点。权限功能点的管理... 继续阅读 >

2021
07-01

Vue Element前端应用开发之菜单资源管理

目录1、菜单资源及管理界面介绍2、菜单和路由的结合管理1、菜单资源及管理界面介绍前面介绍过，权限管理一般都会涉及到用户、组织机构、角色，以及权限功能等方面的内容，ABP框架的基础内容也是涉及到这几方面的内容，其中它们之间的关系基本上是多对多的关系，它们的关系如下所示。加入菜单资源，以及整理它们之间的关系和表的信息，整理图示如下。结合ABP后端提供的接口，Vue前端我们要实现基础的用户、组织机构、角色、功能权限... 继续阅读 >