随笔分类 -  ElementUI

elementui el-image组件 点击按钮 预览图片
摘要：今天遇到一个新的需求，点击按钮查看图片，且图片能放大缩小。如下图： 想到了使用element-ui的el-image组件，官网示例： <div class="demo-image__preview"> <el-image style="width: 100px; height: 100px" :sr 阅读全文
posted @ 2021-12-29 09:22 秋墨江雪 阅读(5641) 评论(0) 推荐(0)
element-UI级联选择器(Cascader)获取label值 - 代码篇
摘要：element-ui级联选择器(Cascader)获取级联对象 ：主要是想获取:label值、value值 效果图预览： <el-cascader :options="options" v-model="selectedOptions" :props="props" size="small" ref 阅读全文
posted @ 2021-12-27 14:42 秋墨江雪 阅读(1883) 评论(0) 推荐(0)
doLayout 解决 elementui table加载数据之后错位问题
摘要：doLayout 解决 elementui table加载数据之后错位问题 有的时候在使用elementui 的table时候，更新完数据之后。表格就会错位。这个时候只需要使用doLayout重新加载一下table就好了。 <el-table ref="tableref" ></el-table> 阅读全文
posted @ 2021-12-27 14:14 秋墨江雪 阅读(1261) 评论(0) 推荐(0)
vue的$message（提示框换行）
摘要：之前一直在搜怎么让提示框的文字换行，网上搜到的基本都是使用 ‘ /n ’,使用无效，也试了css换行，本来想用弹窗自己编辑html内容，还好回去官网看了一下； let arr = ['测试一', '测试二', '测试三']; let str = arr.join(' <br/> '); this.$ 阅读全文
posted @ 2021-12-27 10:01 秋墨江雪 阅读(1724) 评论(0) 推荐(0)
VUE Element-UI 用户修改和重置密码时，新密码和密码确认失去焦点的时候不一致的校验
摘要：<el-dialog title="修改密码" :visible.sync="dialogTableVisible" :fullscreen="true" :show-close="false" :close-on-click-modal="false" > <el-form ref="form" 阅读全文
posted @ 2021-12-24 17:25 秋墨江雪 阅读(1109) 评论(0) 推荐(0)
Element-ui的表单中怎么添加正则校验
摘要：Element-ui的表单中怎么添加正则校验 1. 以中国大陆手机号验证为例 // 这是组价的代码 <el-form-item prop="mobile"> <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" pla 阅读全文
posted @ 2021-12-24 15:53 秋墨江雪 阅读(546) 评论(0) 推荐(0)
element 全局$message使用方法（vue中使用和js中使用）
摘要：main.js 内配置 import { Message } from 'element-ui' // 挂载到$message上 Vue.prototype.$message = Message vue中使用 this.$message.warning("1111111111111111111") 阅读全文
posted @ 2021-12-24 14:49 秋墨江雪 阅读(1954) 评论(0) 推荐(0)
【ElementUI】表单组件el-input填写不显示填写内容
摘要：el-input输入不显示现象： input框填写不显示、日期组件选择不了，这与可能存在的动态加载的数据存在异步问题有关，这会导致组件内容不能及时更新； 解决方法： <!-- 文本标签 --> <el-input v-if="item.type=='4'" v-model="form[item.fi 阅读全文
posted @ 2021-12-24 14:46 秋墨江雪 阅读(1317) 评论(0) 推荐(0)
ElementUI校验[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove‘ event. 问题解决
摘要：ElementUI表单校验[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event. 解决方案 1.问题描述： vue项目中使用ElementUI的表单form校验单的时候，出现以下警告： 阅读全文
posted @ 2021-12-24 11:35 秋墨江雪 阅读(1245) 评论(0) 推荐(1)
解决：VUE项目Avoided redundant navigation to current location: “/XXX“.问题
摘要：在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复 解决：router文件夹下面的index.js中加上下面几句代码，搞定 // 解决ElementUI导航栏中的vue-router在3.0版本以上重复 阅读全文
posted @ 2021-12-24 11:26 秋墨江雪 阅读(137) 评论(0) 推荐(0)
element表格在浏览器放大缩小情况下产生错位
摘要：element表格在浏览器放大缩小情况下产生错位 在谷歌浏览器中特有的问题，element框架中的带有border属性的表格，在电脑改变缩放与布局的比例和谷歌浏览器缩放页面的时候，表格会产生错位问题。一般谷歌浏览器和360浏览器会产生这个问题。 一般这种情况下，我们拉伸页面表格的错位有时候会恢复正常 阅读全文
posted @ 2021-12-24 10:54 秋墨江雪 阅读(1820) 评论(0) 推荐(0)
element ui table 组件固定列踩坑 使用doLayout
摘要：element ui table 组件固定列踩坑 使用doLayout 切换数据源 导致table 固定列多出一行空白 使用table 组件自带的方法可解决 获取数据后 阅读全文
posted @ 2021-12-24 10:52 秋墨江雪 阅读(960) 评论(0) 推荐(0)
Element-ui的表单中怎么添加正则校验
摘要：Element-ui的表单中怎么添加正则校验 1. 以中国大陆手机号验证为例 // 这是组价的代码 <el-form-item prop="mobile"> <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" pla 阅读全文
posted @ 2021-12-23 09:00 秋墨江雪 阅读(394) 评论(0) 推荐(0)
element的from表单正则验证
摘要：element的from表单正则验证 rules: [ { required: true,whitespace:true, message: '用户名必须输入' }, { min: 4, message: '用户名至少4位' }, { max: 12, message: '用户名最多12位' }, 阅读全文
posted @ 2021-12-22 14:17 秋墨江雪 阅读(268) 评论(0) 推荐(0)
Error in v-on handler: “TypeError: this.$confirm is not a function“
摘要：Error in v-on handler: “TypeError: this.$confirm is not a function“ 在vue项目中从全局引入element-ui改为按需引入后报错 解决方法： 1 引入messageBox 插件 import {MessageBox} from ‘ 阅读全文
posted @ 2021-11-25 14:49 秋墨江雪 阅读(1832) 评论(0) 推荐(0)
element table show-summary 合计行不显示问题
摘要：element table show-summary 合计行不显示问题 el-table 中加上 ref 属性 <el-table ref="table-01" show-summary border> </el-table> 在updated生命周期函数，调用 table 的 doLayout() 阅读全文
posted @ 2021-11-24 16:01 秋墨江雪 阅读(270) 评论(0) 推荐(0)
[Violation] Added non-passive event listener to a scroll-blocking ＜some＞ event.
摘要：[Violation] Added non-passive event listener to a scroll-blocking ＜some＞ event. Passive Event Listeners——让页面滑动更加流畅的新特性 Passive Event Listeners - 被动事件监 阅读全文
posted @ 2021-11-11 14:39 秋墨江雪 阅读(3907) 评论(0) 推荐(0)