草庐IT

el-form组件如何清除校验提示(前端技能提升)

错误效果错误描述 在切换radio切换的时候校验提示提示出来了,本身不应该出来但是如何取消呢?因为在切换时候我们置空但是并没有取消校验,所以从通过到拒绝置空时候肯定会出现提示语,那么我们把提示校验的方法去掉就行了。 错误代码reviewStateChange(val){if(val==='2'){this.ruleForm.remark=''}if(val==='3'){this.ruleForm.remark=''}}正确代码 reviewStateChange(val){if(val==='2'){this.ruleForm.remark=''}if(val==='3'){this.rul

vue elementui 修改步骤条el-steps的样式

感觉以后可能还会用到,在此记录一下场景:elementui原有的样式:目标样式: 实现: html代码:多加了个居中属性:align-centercss代码:@publicColor:#018736;@publicHeight:35px;.steps{width:80%;margin:20pxauto0;height:@publicHeight;::v-deep.el-step{height:100%;.el-step__line{background-color:rgba(0,0,0,0.15);margin-right:30px!important;margin-left:105px!im

关于一些bug的解决1、el-input的输入无效2、搜索之后发现数据不对3、el多选框、单选框点击无用4、

el-input输入无效原来的代码是vartest=null但是我发现不能输入任何值反倒修改test的初始值为123是可以的于是我确定绑定没问题就是修改的问题于是改成vartest=ref()v-model绑定的值改成test.value就可以了因为ref是相应式的可以通过输入框的修改而修改另外如果你发现你的输入框不能输入东西还有可能是你的v-model绑定失败造成的搜索后发现数据不对问题1搜索后发现自己的数据不显示了代码@click=“handleButtonClick(‘搜索’),showConfirmationModal2()”:class=“{‘blue-text’:activeBut

el-menu修改item颜色

  今天在在点击el-menu的一级菜单和二级菜单出现了点击成白色,刚好我设置的文字颜色也是白色,就变成什么都看不见了。//设置一级菜单和二级菜单的背景颜色.el-sub-menu.el-menu-item{background-color:RGB(38,87,227)!important;}//设置选鼠标指针浮动在一级菜单的设置.el-menu-item:hover{background-color:aqua!important;;}//设置当前被选中的一级菜单.el-menu-item.is-active{color:#fff!important;background:black!impo

【前端】vue采用el-table 添加行手动填写数据和删除行及提交

        需求:点击新增按钮实现下列弹窗的效果,点击添加行新增一行,点击删除进行删除行,点击提交将数据传递到后端进行保存。目录代码datamethods实现效果代码添加行{{scope.row.index}}显示在输入框的下面-->序号-->{{scope.row.riskPointName}}-->{{scope.row.riskLevel}}-->{{scope.row.hiddenDanger}}-->{{scope.row.type}}-->{{scope.row.accident}}-->{{scope.row.remark}}-->删除提交datadata(){return{

Vue3问题:如何实现El-table内容超出省略提示?第三条很少有人会

一、需求分析,问题描述1、需求一个表格,分表头、表体、表尾三部分。当每个单元格的内容过长超出时,需要省略,用省略号代替超出的部分。同时,当鼠标移入上去时,会在上方弹出一个小提示框,其内部可以展示完整的对应内容,当鼠标移出时,隐藏小提示框。2、问题表头如何实现省略提示效果?表体如何实现省略提示效果?表尾如何实现省略提示效果?如何实现单行省略和多行省略?二、解决问题,答案速览实现代码如下,复制粘贴即可直接使用。1、表头实现表头实现的关键,在于在每一栏中插入表头插槽,并自定义内部的内容。如果你有时间,具体代码分析、知识总结,可见第三部分。12345678PrincipalRepayment91011

Vue系列第七篇:Element UI之el-main,el-table,el-dialog,el-pagination,el-breadcrumb等控件使用

本篇实现主页面功能,包括主页面排版布局,学生管理模块实现,后台接口实现等功能。目录1.运行效果1.1登录页面1.2主页面 1.3学生管理-信息列表1.4学生管理-信息管理 1.5学生管理-作业列表1.6学生管理- 作业管理2.前端代码2.1代码结构 2.2代码实现3.后端代码3.1代码结构3.2代码实现4.其他4.1vscode快速编写正则表达式1.运行效果1.1登录页面1.2主页面 1.3学生管理-信息列表  1.4学生管理-信息管理 1.5学生管理-作业列表1.6学生管理- 作业管理2.前端代码2.1代码结构 2.2代码实现src/api/api.js//业务服务调用接口封装imports

el-button实现按钮,鼠标移入显示,移出隐藏

2023.8.18今天我学习了如何实现鼠标移入显示按钮,鼠标移出隐藏按钮。效果如图:鼠标移入时:鼠标移出时: @mouseover//鼠标移入事件@mouseleave//鼠标移出事件 原本我是想直接在el-button写入这两个方法,但是elementUI并不支持。所以我在外面套了一层div切换//鼠标移入样式.show_button_style{width:6vh;height:3vh;display:inline-block}//鼠标移出样式.leave_button_style{width:6vh;height:3vh;display:none}exportdefault{data()

解决 element ui Carousel跑马灯组件,el-carousel-item数量为2时,组件循环方向一左一右的问题

在项目中有些数据需要轮播展示时,使用Carousel组件非常合适,可以在页面内挂载很多内容节点,平常组件的循环显示方向默认是往右边滑动,但是在循环数量为2时,循环显示方向就会呈现一左一右,对于部分强迫症客户来说体验感就不是很好,如下图实现循环数量为2时,循环显示的方向依旧为向右(上下滚动的除外)的思路首先获取要循环的数据的长度length,如果为2时,复制一次,使其成为长度length为4的数组,然后将Carousel组件的indicators(下标显示器)多复制的给隐藏(原本长度为2,现在为4,就隐藏第3个和第4个) 最终成品效果如下 完整代码如下,可直接复制使用{{item}}export

vue el-upload 上传文件格式校验

1、文件大小验证    file.size以字节Byte为单位(Blob类型),1MB=1024KB,1KB=1024Btyeexportdefault{methods:{beforeAvatarUpload(file){constisLt2M=file.size/1024/10242、文件格式验证    文件名后缀是支持大小写的,如.mp4.Mp4.mP4.MP4都是可以正常播放的,所以我们校验的时候通过先将其转成小写,再进行校验。(图片同理)file.name.split('.')[1].toLowerCase()!='mp4';//视频不是.mp4格式的letformatArr=['im