element
文章平均质量分 76
element ui
哈!小白要成长!
这个作者很懒,什么都没留下…
展开
-
Vue Element UI 之 date-picker 禁用时间和报错:TypeError: Cannot read property 'getHours' of undefined
场景:使用 date-picker 日期选择器,并禁用日期报错:TypeError: Cannot read property 'getHours' of undefined原因和解决方法:绑定数据的格式需要是字符串类型详情:由于粗心,误了方向,以为是控件的属性写的不对,百度了一下,才知道是绑定的数据格式写错了date: []修改回来,写成字符串就好了date: ''转自:h...原创 2020-03-31 16:55:31 · 3180 阅读 · 0 评论 -
Vue Element UI 之富文本插件实现图片调整大小(quill-image-resize-module)、图片粘贴(quill-image-drop-module)
quill-image-drop-module:允许粘贴图像并将其拖放到编辑器quill-image-resize-module:允许调整图像大小环境:vue cli3第一次写这个功能,出现了一些意想不到的报错Cannot read property 'imports' of undefinedCannot read property 'register' of undefined...原创 2020-03-19 16:18:34 · 5807 阅读 · 14 评论 -
Vue Element UI 之使用 Notification 组件--报错 this.$notify is not a function
意欲寻找一个良好的警告提示,发现 Notification 还不错,拿起来就用~~~1、在 template 中<el-button plain @click="warnMoodIndex"> 警告 </el-button>2、在 script 的 method 中warnMoodIndex() { this.$notify({ title: '警告', ...原创 2020-03-17 17:51:14 · 10126 阅读 · 3 评论 -
Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本
该案例的情况vue版本:vue cli3插件:vue-quill-editorvue-quill-editor的增强模块:quill-image-extend-modulequill-image-extend-module功能:提供图片上传到服务器的功能复制插入显示上传进度显示上传成功或者失败文章目录一、选择这种方式的来龙去脉(读者可自行跳过)二、实现2.1 安装插件2....原创 2020-03-17 13:51:31 · 3179 阅读 · 0 评论 -
Vue Element UI 之标签动态绑定style属性
有多个 div 标签分属于多个类别,这里想要给每一个类别的 div 一个各自的背景颜色语句如下:style="{'background-color': subItem.bccolor}具体步骤1、绑定数据,在标签中写 :style="{'background-color': subItem.bccolor}<div v-for="(subItem,index) in item.c...原创 2020-03-05 23:14:11 · 6232 阅读 · 0 评论 -
Vue Element UI 之日历组件 vue-calendar-component 和 vue-fullcalendar
组件一:vue-calendar参考:https://blog.csdn.net/weixin_43023873/article/details/91850497?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task和https://blog.c...原创 2020-03-02 22:15:19 · 3952 阅读 · 0 评论 -
Vue Element UI 之ECharts图表
echarts官网:https://www.echartsjs.com/zh/index.htmlecharts官网手册:https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts菜鸟教程:https://www.runoob.com/echarts/echarts...原创 2020-03-02 21:36:47 · 30305 阅读 · 2 评论 -
Vue Element UI 之同级/兄弟组件间传值(sessionStorage,eventBus,同一父组件)
相关连接父子组件间传值:https://blog.csdn.net/qq_41956139/article/details/104260473发布者-订阅者模式:https://blog.csdn.net/qq_41956139/article/details/104296945方式一、通过sessionStorage优点:无需通过任何事务触发;随时随地获取,不受组件间关系限制// ...转载 2020-03-01 20:41:17 · 1716 阅读 · 1 评论 -
Vue Element UI 之el-table表格数据列表显示和分页功能
实现:通过 el-table 显示表格,并填充数据,表格数据分页显示主要:el-table:用于显示数据template :作用域插槽el-pagination:用于分页辅助:el-switchel-buttonel-tooltip参考代码如下:<!-- 在表格中显示用户信息 --><el-table :data="userlist" borde...原创 2020-02-26 22:07:11 · 10343 阅读 · 2 评论 -
Vue Element UI 之表单验证 -- 对el-form表单的部分字段验证 / 某个字段验证
参考:https://blog.csdn.net/weixin_30629977/article/details/95009851和https://blog.csdn.net/qq_37782076/article/details/85123602例子:如下图所示,在注册功能中,点击“获取验证码”按钮的时候,对手机号输入和随机验证码输入进行正确性校验这里用到了一个方法:validate...原创 2020-02-21 20:43:57 · 13000 阅读 · 0 评论 -
Vue Element UI 之默认样式修改不成功的问题
一、问题描述想要在某个 el-form-item 中添加一个 color 属性,在浏览器调试没有问题,然后就把代码复制粘贴到项目中,但是问题出现了,竟然没有添加上去,what?why?这是在测试的时候确定的位置,红框内是测试时添加的样式(这是它该有的样子,然而,当我在项目中写好代码,刷新之后再次来到这里,发现空空如也,红框代码它不在)这是在项目中修改的代码:<style scope...原创 2020-02-18 22:01:47 · 3048 阅读 · 3 评论 -
Vue ElementUI 之在项目页面中插入富文本编辑器
1、安装依赖 vue-quill-editor安装方式有多种,可视化安装、npm 安装,或者也可以 CDN 引用,详见 GitHub上的说明(1)可视化安装在项目下,依赖> 安装依赖> 运行依赖,搜索并安装 vue-quill-editor(2)npm 安装npm install vue-quill-editor --save2、全局注册 vue-quill-edito...原创 2020-02-04 18:46:27 · 2155 阅读 · 0 评论 -
Vue ElementUI 之上传图片
一、使用组件介绍el-form:表单组件,用于绑定数据el-upload:上传组件,内置有提交请求方法(但是本demo要求有token验证,因此需要调用demo中自定义的axios请求)el-dialog:对话框组件,用于显示预览图片二、实现过程1. 实现代码1.1 template 中代码<el-form :model="addForm" :rules="addFormR...原创 2020-02-04 17:49:03 · 1729 阅读 · 0 评论 -
【禁用eslint语法报错】element 按需导入组件遇到的问题
问题一,import次数过多一、问题描述error: ‘E:\VueSavelace\demo-vue_shop\node_modules\element-ui\lib\element-ui.common.js’ imported multiple times (import/no-duplicates) at src\plugins\element.js:3:24:二、出错原因多次引用...原创 2020-01-24 14:09:35 · 9097 阅读 · 2 评论 -
ElementUI 之 组件中出现的那些 bug(整理总结中)
写在前面:文章用于自学,文中有多出引用,均已注明,若有不妥,还请告知,谢谢文章目录1. el-cascader 级联选择器:高度过高的问题1.1 问题描述1.2 解决方法2. el-pagination 分页:删除最后一页的所有数据后,列表内容为空2.1 问题描述2.2 解决方法3. el-input 文本输入框:@keyup.enter.native和@blur同时绑定handleInpu...原创 2020-02-03 20:01:06 · 2909 阅读 · 5 评论 -
Vue Element 之表单预验证
技术validate接下来,就是动手实现啦第一步:获取到表单引用对象首先,使用 ref 属性为子组件分配引用 ID。在 form 表单中注册ref="loginFormRef",具体如下:<el-form label-width="0px" :model="loginForm" ref="loginFormRef"> <el-form-item class="...原创 2020-01-24 14:32:10 · 1114 阅读 · 0 评论 -
Vue Element 之表单重置
第一步:第二步:第三步:原创 2020-01-24 14:23:34 · 1088 阅读 · 0 评论 -
Vue Element 之表单验证
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可trigger‘blur’ :失去焦点触发‘change’:发生改变触发第一步:在form上添加属性绑定:rules指定校验对象第二步:在data数据中定义校验对象第三步:对表单项from-item通过prop指定验证规...原创 2020-01-24 14:21:26 · 341 阅读 · 0 评论 -
Vue Element 之表单绑定
第一步:在form表单中添加:model绑定数据对象第二步:在form下的元素上添加v-model:进行数据对象的属性绑定第三步:在script标签中写数据对象至此,完成...原创 2020-01-24 14:16:46 · 554 阅读 · 0 评论