![](https://img-blog.csdnimg.cn/2dbd8cf82c584e0bb3bec3f2e824a0a9.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
element UI
文章平均质量分 54
......
湘水狱
这里是记录小编学习和工作中遇到的问题及解决后的答案,希望对你有所帮助,错误的地方,请多多指教
展开
-
【记录43】el-table @selection-change 数据回显、条件约束、历史回显清除
表格中选中的人员,点击取消后,再次进来人员还在,部分可能觉得正常,实际是不对(切换了数据绑定对象,还存在是不对的)。这里笔者做了一个点击取消就默认为当前选择的取消(不要了)限制选中人员上限,大家可能会想到直接判断选中的list,实际操作中存在一个问题:你选择了,给了提示,表格显示上还是会选中。在其他地方设置好人员,到对应的页面直接在表格中复选设置好的人员。到这里基本完成了回显功能。原创 2024-05-31 11:32:51 · 560 阅读 · 0 评论 -
【记录41】el-menu 动态菜单
【代码】【记录41】el-menu 动态菜单。原创 2024-04-06 16:22:51 · 212 阅读 · 0 评论 -
【记录31】elementUI el-tree 虚线、右键、拖拽
elementUI el-tree 虚线、右键、拖拽。原创 2024-03-05 19:30:00 · 900 阅读 · 0 评论 -
【案例】简单的账号短信登录
/ true 账号登录 false 短信登录。//图片所在路径,并加载。原创 2023-12-25 16:28:09 · 1211 阅读 · 0 评论 -
element UI之 el-date-picker 无法选择当前日期
width260px</问题所在之处。原创 2023-11-30 10:25:05 · 1099 阅读 · 0 评论 -
【记录26】UI组件 密码的显隐
element UI的密码显隐vant UI的密码显隐原创 2022-05-14 00:00:00 · 291 阅读 · 0 评论 -
【记录5】el-table合计行不显示,除页面缩放或者F12
1.控制合计行中列显隐; 2.就是正常进入页面合计行没有出现,只有按F12、F11,及页面缩放才会显示出来,而我们要的是直接显示出合计行; 3.合计行在表格滚动条下方原创 2021-12-09 13:34:23 · 2177 阅读 · 0 评论 -
【2.0版本】可自行增减的动态表单
动态表单介绍效果图单个动态表单效果图多个动态表单效果图重点部分讲解正常情况下,表单prop定义:而动态表单定义:正常情况下,data定义:而动态表单的data定义:事件:`标记`:多个动态表单代码:介绍关注编者博客的都知道小编的文章中有一篇动态表单文章,跳转链接,话说这篇文章写的是真的,,,,差,这篇文章小编就暂时不删了,留着提醒小编。好了,估计你看到这都烦了吧!!!小白话不多说,下面就是对你们好的时候,直接放效果图,看各位是否喜欢,说错了,怎么能是喜欢呢,呸呸呸,应该是否符合你的口味,都看这了眼神下原创 2021-11-29 11:46:11 · 939 阅读 · 0 评论 -
【记录1】根据需求对月份做出相应的处理及解决方法
年月日计算需求后端参数要求难点逻辑思路实现代码需求选择当前月份,得到当前月份和上月的数据比较,如相同码的衣服,相比上月降了多少或者升了多少后端参数要求// 接口要求参数格式start_time = '2021-11-01',end-time = '2021-12-01'难点当月份为12时,年加一,月变为一;(当前月份为2021-12-01时,下对应的月份为2022-01-01)月份的长度为1时,变为长度为2 的月份,处理,(当前月份为2021-09-01时,下对应的月份为2022-10原创 2021-11-08 13:19:44 · 200 阅读 · 0 评论 -
按钮限制:避免重复或多次点击事件
按钮控制需求说明探索解决方法1:加时间限制解决方法2:根据el-button自带属性(loading)来限制需求说明相信大家在提交表单给后端时,时不时由于网络延迟的问题导致,重复提交表单,进而网络好了,就多了好几条数据。那么到底该如何解决这种问题呢!下面小编带你一起来探索与解决探索以前小编以为这个是后端责任,为何呢?因为后端没有限制一个时间段之内最多请求几次,想着我前端只要把参数(值)传给他就行,后来越想不对,这是它后端该怎么处理这个 问题不关我们的事,但我们前端也应该有自己的解决办法。想到这,我原创 2021-10-21 15:40:23 · 7519 阅读 · 0 评论 -
用户注册和验证
用户注册一、效果图1、用户名验证①规则:只能是字母②规则:只能是中文2、手机号验证3、新密码验证4、验证两次密码是否一致二、图片完整代码三、总结一、效果图看看是否是你们想要的效果图??1、用户名验证这里首先要看你对用户名有什么要求,例如:只能是中文,或者字母。笔者这里没有限制用户名的规则,只是要求不能为空。通过监听事件来时刻监听用户名输入框的变化。“user_name”: { deep: true, handler(val){ if(val !== ''){ this原创 2021-09-18 10:14:38 · 2777 阅读 · 0 评论 -
静态背景和动态背景
自定义颜色和背景自定义背景(图片)自定义背景(颜色)自定义背景(图片)背景为图片自定义背景(颜色)背景通过“颜色选择器”自主选择,同时根据选择的颜色,界面发生颜色变化这里笔者用的是elementUI组件中的“颜色选择器—<el-color-picker> </el-color-picker>”,案例:代码块代码块,如下:<div> <el-color-picker v-model='color_bg' show-alpha ></原创 2021-09-13 14:06:27 · 295 阅读 · 0 评论 -
登录界面(简约版)
登录界面效果图:放大图:一(1)放大图:二(2)话不多说,直接放代码:<template> <div :style="background" class="main"> <div class="secondary"> <el-row> <div :style="background_title" class="titl">原创 2021-09-01 11:39:45 · 969 阅读 · 0 评论 -
el-input输入框无法输入
测试人员在系统测试时,发现有时出现输入框输入不进去,鼠标什么都可以点击。这个是elementUI组件中的一个小坑吧!在本地完全没事,偏偏在别的地方就会出现,哎!是真的让你不爽!通过查资料,说法一:嵌套太深;说法二:该组件的一个坑;好的是:有了解决办法,利用this.$forceUpdate();强制刷新一下。如下:<el-input type='text' v-model='value' @change='change()'></el-input>data(){原创 2021-06-17 17:22:02 · 1454 阅读 · 0 评论 -
【已解决】el-element中el-select的el-option选中值,不显示问题
笔者出现的这种情况是:同一个表单中有两个下拉框,第一个选中后,不显示,只有第二个选了,两个都显示,这样是不对的,并且一个表单中可以有多个下拉框(之前亲测无误),这次不知道为啥<el-select > <el-option lable="男" value="男"></el-option> <el-option lable="女" value="女"></el-option> <el-option lable="变性者" value="变原创 2021-06-09 15:47:33 · 6360 阅读 · 0 评论 -
图片上传el-upload
上传图片(照片) <el-upload action="" //图片上传的路径 style="text-align:left;margin-left:0px;" :show-file-list="true" //是否显示已上传文件列表 :on-preview="handlePrevie原创 2021-06-02 15:37:24 · 376 阅读 · 0 评论 -
vue 直接将el-table数据导为excel文档
vue如何实现文件导出:即将表格数据导出为excel文档,实现方法如下步骤案例讲解首先需要下载通过下面地址链接下载文件链接:https://pan.baidu.com/s/1v48MnFeqvDIboxix8N-7hg 提取码:f6xh然后在src文件下创建一个excel文件,便于后期的一些查找和问题的处理最后直接在相应的位置(方法中)使用即可此部分代码看下方代码块this.excelData = this.cycleData // this.export2e原创 2021-05-24 09:51:16 · 1923 阅读 · 4 评论 -
For recursive components, make sure to provide the “name“ option
报错:Unknown custom element: <el-asider> - did you register the component correctly? For recursive components, make sure to provide the "name" option.问题:elementUI在vue中使用,element的组件都可以使用,唯独没有效果,全局也引入了,还是无效果,F12,发现控制台报了上面的错误。怀疑是样式的引入问题,找到node_modules文件中原创 2021-03-21 17:36:42 · 578 阅读 · 0 评论 -
时间按钮:给按钮添加一个计时器
点击前:点击后:到时间后:代码展示:原创 2021-02-03 20:23:00 · 995 阅读 · 0 评论 -
个人信息界面+修改密码界面
下班没啥事,花费三个小时做了一个“个人设置”界面,所使用的框架是vue,技术是element UI组件。拿去不谢!!!有帮助的话,点个赞再走<template> <div style="background-color:#FCFCFC;font-family:'宋体';height:100%;"> <div> <my-bread level1='个人中心' level2='修改密码' :level3="level原创 2021-02-03 20:17:48 · 13064 阅读 · 3 评论 -
如何给值赋颜色
问题:如何给表格中的文字添加想要的颜色?及根据不同的值显示不同的颜色?![在这里插入图片描述](https://img-blog.csdnimg.cn/20210202171859899.png图一:是给直接给值添加颜色,写法:简单的就是直接写定就可以了。<el-table-column align="center" prop="infaust_geologicbody_name" label="不良地质体名称" width="" > <template slot-scope原创 2021-02-02 17:35:50 · 266 阅读 · 0 评论 -
动态表单实现远程搜索
效果:动态表单实现远程搜索技术:vue + element UI首先,弹出框表单:如下图点击“下一步”,接着会弹出一个动态的可远程搜索的表单如图:输入框可进行远程搜索,点击提交即可,我这里虽然做了展示,但后端要求是发送人员的ID,我在代码中做了处理,啥也不说,看代码:说明:这里只展示动态表单的远程搜索的代码和获取人员ID代码,想看动态表单代码,请点击这里查看改成如下图就行:接下来是*method*:可复制://远程搜索技术员(调试及测试成功) querySea原创 2021-01-21 17:53:26 · 442 阅读 · 0 评论 -
文件和照片一起提交
啥也不多说了,先看图:是你想要的意思吗?接着看,重点来了,代码块如下,数据提交看最后<el-row :gutter="10"> <el-col :span="2"> <div class="tab">掌子面素描图</div> </el-col> <el-col :span="4"> <el-form-item prop="tunnel_sketch">原创 2021-01-12 11:57:59 · 196 阅读 · 0 评论 -
输入框远程搜索
实现效果:在输入框输入相关参数(查找字段)来查询想要的信息,并选择。效果解说:实现远程搜索的位置是“技术员”,通过手机号精准查找某个人,并选择他。我这块后端要求返回的是该人的ID。环境:vue + element ui代码块:这块只展示主要的html代码<el-col :span="2"> <div style="text-align:right;">技术员</div></el-col><el-col :span="4">原创 2021-01-12 11:31:49 · 1648 阅读 · 0 评论 -
Cannot read property ‘resetFields‘ of undefined
报错:Cannot read property ‘resetFields’ of undefinedmethods:{ //解决方法 this.$nextTick(() => { this.$ref.formRef.resetFields() )}}原创 2020-12-30 17:19:25 · 470 阅读 · 0 评论 -
【1.0版本】vue+element UI动态添加表单
图片源码(可复制往后翻):data中定义:methods中:console.log(this.receiverForm.object)在控制台打印出的就是你填写提交的数据可复制源码:<el-col :span="2"> <div style="text-align:right;">接收人</div></el-col><el-col :span="3"> <el-form-item prop="worksi..原创 2020-12-18 17:46:55 · 2674 阅读 · 10 评论 -
表格内嵌进度条
先看看是不是想要的效果图:如果是,请继续往下看,若不是,请立即关闭网页,不要耗费无用的时间在这。是:先说明下,作者采用的是vue+element UI技术,其实,实现起来非常简单,大家都知道表格中加按钮是如何加的,看下图:注意:<template slot-scope="scope">中的slot-scope,这才是重点。通过它才能获取到该行的数据,如:编辑按钮–> 点击编辑获取编辑行的所有数据@click="worksiteEdit(scope.row,scope.$index原创 2020-12-18 15:10:03 · 634 阅读 · 1 评论 -
按钮如何控制tab页面跳转
按钮控制tab跳转:想通过按钮来控制tab切换,并触发事件,进而获得相应的数据图一:图二:操作效果介绍:图片为el-tab-pane页面,由图一可看到当前所在**工区tab页面,点击添加工点**,页面从工区自动跳转之工点tab页面实现:相信大家都知道,el-tabs中有一个属性:activaNameel-element官方文档给的是activaName=‘first’,实际其还可以为string的1、2、3、、、、例:activaName= '1',该属性还需在data中定义下和设置默认值,然后在按原创 2020-12-17 18:01:33 · 3045 阅读 · 2 评论 -
el-dialog弹出框编辑
先看效果:官方的弹出框 官方文档el-dialog按照官方文档区写就好了,我这里就不展示“表格”和“弹出框表单”的代码了,只留下事件的代码块。点击“编辑”时,是将行数据赋值给“编辑表单”this.editForm = Object.assign({}, row),这样就会把行数据在“编辑”中展示出来。注意:点击“编辑”事件时,加上this.dialogEditFormVisible=true,默认时,其为false,这样“弹出框”弹出时也携带着相对应的数据,修改完,点击“确认提交”就ok了。有点地方原创 2020-12-02 11:31:40 · 3015 阅读 · 1 评论 -
vue+element UI实现城市三级级联选择器
这里我导入一个json文件,import optionsD from '../所存放的地址/cities.js‘,然后直接将其赋给:options="optionsD"即可,这样就完成了json文件:在这里插入代码片原创 2020-11-27 11:36:17 · 1222 阅读 · 0 评论 -
怎么给用户授权或添加角色
该如何将两个表格的数据打包发给后端,后端要求数据格式:[ { user_id : 1 , roler_id : 1 } , { user_id : 1 , roler_id : 3 } , { user_id : 1 , roler_id : 4 } , { user_id : 1 , roler_id : 7 } , { user_id : 1 , roler_id : 9 } , { user_id : 1 , roler_id : 5 } , { user_id : 1 , roler原创 2020-11-26 18:51:59 · 1798 阅读 · 0 评论 -
如何获取级联选择器选中的值
今天遇到了一个级联选择器的问题:如何将选中的值反馈给后端。问题已解决:亲测有效,成功查资料的结果:this.ref[′userddd′].getcasederNodes[0].labelthis.ref['userddd'].getcasederNodes[0].labelthis.ref[′userddd′].getcasederNodes[0].labelthis.ref[‘userddd’].getcasederNodesthis.$ref[‘userddd’].getcasederNode原创 2020-11-12 15:43:41 · 3854 阅读 · 1 评论 -
vue+element动态接参自动生成组织机构树
vue + element UI开发借用饿了么中的树形控件来实现组织机构树,直接展示效果:过滤效果:代码如下,拿去不谢:<template> <div> <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> <el-tree class="filter-tree" :data="dataOrgization" :props="defaultP原创 2020-10-12 14:09:19 · 1092 阅读 · 0 评论 -
搜索框和按钮放在同一行
如何将搜索框和按钮放在同行??这样看起来超难看,所以想把搜索框和按钮放在同一行,这样的话,使界面更美观。原创 2020-11-10 08:59:23 · 12920 阅读 · 1 评论 -
element中tab的使用和传参
技术:vue+element , 来决策el-form表单中的一项展示,进而便于用户选择项目场景:一张表格:通过接口获取数据并遍历生成的表格;一个表单:在另一个界面的表单,需借用表格中的一个属性值;注意:该两个界面在同一个组件中问题描述:问题一:如何从表格中获取该属性值?问题二:如何将该属性值传入data中?原因分析:业务需要:便于用户更好的操作和体验感解决方案:记得你在data()中的一些定义?data(){ return { table1:[], //表格中的:data原创 2020-11-10 08:51:11 · 7284 阅读 · 1 评论