element-ui
文章平均质量分 54
草巾冒小子
分享[前端技术主页] http://www.lzindex.com/
展开
-
elment-ui 日期选择器 月份区间选择的问题解决(含代码、截图)
【代码】elment-ui 日期选择器 月份区间选择的问题解决(含代码、截图)原创 2023-10-24 13:41:51 · 577 阅读 · 0 评论 -
解决el-table的高频次晃动抖动问题
【代码】解决el-table的高频次晃动抖动问题。原创 2023-01-31 23:45:17 · 1841 阅读 · 0 评论 -
【ElementUI 表格 性能优化】table页面加载慢、渲染卡顿问题(分析说明)
element 表格性能优化(提升页面加载速度)加载慢 · 原因分析统计:(含优化建议)需要用到的可以选择自己每一列把。当内容过长被隐藏时显示。原创 2022-08-31 21:44:38 · 9121 阅读 · 0 评论 -
解决el-table的$refs获取不到的问题(踩坑篇)
解决el-table的$refs获取不到的问题(踩坑篇)原创 2022-08-31 21:43:39 · 5834 阅读 · 0 评论 -
elementUI时间选择器:TypeError: value.getHours is not a function
使用elementUI的日期时间选择控件报错element-ui时间控件报错:TypeError: date.getHours is not a function、TypeError: date.getFullYear is not a function、TypeError: value.getTime is not a function。原创 2022-08-31 21:34:59 · 1772 阅读 · 0 评论 -
解决 Error: please transfer a valid prop path to form item!
点击某个DOM,如本案例的button取消按钮,产生报错:此时,应该是该按钮绑定的函数钩子事件中,有不合逻辑的空操作或者错误操作,删除或注释即可。以上就是关于“解决 Error: please transfer a valid prop path to form item!prop的内容和rules中定义的名称不一致!...原创 2022-08-31 21:31:24 · 9562 阅读 · 1 评论 -
elementUI 分页组件Bug ,为什么会 infinity ?
bug截图:上面的bug不一定是框架的原因,也有可能是因为前端传参错误导致的,但是已经找了所有.vue页面的逻辑,发现所有页面的定义和逻辑都和之前保持的一致。不i知道...原创 2019-04-10 17:40:07 · 2853 阅读 · 0 评论 -
elementUI组件el-dropdown - 踩坑篇
效果图:正确的代码如下:<div class="it-after" v-if=" resume.phone != ''"> <p class="it-telphone clamp1">{{resume.phone}}</p> <div class="btn3"><el-button type="primary" icon="el-i...原创 2019-04-19 09:00:31 · 40337 阅读 · 1 评论 -
el-radio(自定义样式)获取选中label值 + 选中状态 + 拼接String + post提交 - 踩坑篇
注意点:需要使用 label传值,后台接什么,你就传什么 (这个需要和后台事先确定好)使用@change事件,监听鼠标点击事件,但并非是在每个el-radio对象上都添加该事件,这一点就不同于el-checkbox的@change事件,(具体代码对比:可参考项目的searchMain.vue 条件查询,进行比较学习)获取<el-input type='textarea'>的聚...原创 2019-04-19 09:01:34 · 14108 阅读 · 1 评论 -
elementUI响应式布局@media:基于断点的隐藏类(文档篇)
官方文档 · 说明参考:响应式布局 · 文档说明基于断点的隐藏类 · 文档说明Element 额外提供了一系列类名,用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要,请自行引入以下文件:import 'element-ui/lib/theme-chalk/display.css';包含的类名及其含义为:.hidden-xs-only - ...原创 2019-04-26 13:48:09 · 10867 阅读 · 2 评论 -
elementUI弹框form多元素表单问题 - 抛砖篇
疑问1:elementUI的这个MessageBox弹框能否添加多个表单元素?疑问2:如果能添加多个,怎么添加?疑问3:使用el-dialog组件如何调用?通过上述实践,总结发现还是使用el-dialog组件,比较坑少,直接,出效率!而且该组件还支持: 嵌套 Dialog 的场景,能有效避免 遮罩层级的样式 bug ~~正常情况下,我们不建议使用嵌套的 Dialog,如果需要...原创 2019-04-15 09:16:10 · 7330 阅读 · 2 评论 -
elemenUI - 弹框组件alert - 宽度设置? - 疑问篇
举例如下:(elemenUI - 使用alert弹框组件),对比代码和效果图部分主要代码 · 如下:<el-col class="user-info" :span="12"> <div><el-button type="primary" size="small" @click="dialogTalentCoinTipsVisible = true">增加...原创 2019-06-04 17:11:25 · 16051 阅读 · 10 评论 -
elementUI使用checkboxgroup组件,获得value的数字集合,而不是label的文字集合 - 解决篇
全部代码如下:<template><div id="htmlWrap" v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)...原创 2019-07-21 11:28:05 · 15756 阅读 · 10 评论 -
elementUI表格组件:自定义列模板(完整案例)
elementUI表格组件:自定义列模板(完整案例)所谓的自定义列模板,你也可以理解为自定义td的格式。代码块1:原创 2019-07-23 15:26:26 · 16470 阅读 · 0 评论 -
vue路由+ elementUI表格组件:loop文章列表页enter内容页(vue路由传参userid)- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页?这就是本篇博客的阐述意图。效果图:一、首先,服务器请求回来的数据类型:(代码如下)二、其次,示例elementUI组件的应用代码:(代码如下)三、vue的script关键代码:(代码如下)以上就是关于“ vue路由+ elementU...原创 2019-07-23 15:22:10 · 1610 阅读 · 0 评论 -
elementUI多选框组件:多选数组,取值问题
elementUI多选框组件:多选数组,取值问题效果图:<templete>部分:<!-- 我的推荐人才的简历列表 --><!-- 已发布职位list列表 --><el-table :data="resumes" stripe style="width: 100%" max-height="500" @selection-change="...原创 2019-08-06 12:40:42 · 7532 阅读 · 0 评论 -
elementUI日期选择器:仅设置可选择时间区间
elementUI日期选择器:仅支持从当前day开始选择,过去day不允许选择,直接 disable !不允许选择的时间区间,如何设置?官方文档:点击查看demo地址以上就是关于“ elementUI日期选择器:不允许选择时间区间设置 ”的全部内容。...原创 2019-08-15 15:14:08 · 1848 阅读 · 0 评论 -
Swiper4.5在vue项目中的使用方法
用swiper,所以要先在框架内npm install --save swiper安装它。安装完成之后,你会在路径演示代码如下:<template><div id="htmlWrap" style="background:none;"> <!--header--> <div class="bg545C64" style="backgro...原创 2019-08-16 16:17:04 · 23165 阅读 · 1 评论 -
el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇
element-UI 下拉框el-select组件el-option的v-for问题我的代码:<template> <div id="htmlWrap"> <!--header--> <div class="bg545C64"> <NavMenuVue></NavMenuVue&a原创 2019-04-10 16:43:24 · 80304 阅读 · 5 评论 -
elementUI 分页组件的使用 - 踩坑篇
elementUI 分页组件的使用、API调用、获取服务端数据、并初始化渲染页面:(踩坑一则)因每个公司 / 每个项目 / 客户需求 / 都各有差异,所以本例只是demo说解,并非举一反三或万能分页;但是传统的客户需求还是完全能够通用和满足的。一、分页效果图二、elementUI 分页组件的使用 - 应用篇<!-- 分页组件 --><div class="...原创 2019-04-04 17:11:08 · 26120 阅读 · 2 评论 -
elementUI解决el-checkbox自定义样式、@change样式的失效 等bug - 代码示例
大大大大是原创 2019-03-29 18:29:59 · 11471 阅读 · 0 评论 -
elemen-UI 组件:input输入框 的 样式、代码、效果图对比 - 应用篇
elemen-UI 输入框组件的样式问题:效果图对比:代码如下:(2种) &amp;lt;el-form :model=&quot;form&quot;&amp;gt; &amp;lt;el-input placeholder=&quot;请输入姓名&quot; v-model=&quot;form.name&quot;&am原创 2019-03-12 15:05:38 · 3334 阅读 · 0 评论 -
element-ui 搜索框组件:监听input键盘事件 - 代码篇
踩坑:element-ui 框架监听input键盘事件 - 含demo演示代码篇代码示下: &amp;lt;el-input placeholder=&quot;职位 | 地区 | 工作年限&quot; v-model=&quot;searchVal&quot; @keyup.enter.native=&quot;onEnterSearch&quot;&原创 2019-03-02 17:52:38 · 10636 阅读 · 0 评论 -
element-ui 框架的checkbox组件:点击事件 与 选中判断 - 代码篇
element-ui 框架的checkbox组件:点击事件 与 选中判断 - 代码篇原创 2019-03-02 17:52:13 · 39385 阅读 · 0 评论 -
element-ui 左侧边栏el-menu组件: 路由跳转 - 案例篇
有顶部导航 、还有侧边栏导航:如何实现路由的设置、跳转、高亮?A. 顶部导航 · Hhtml 代码如下:(含高亮设置)&amp;amp;lt;el-menu :default-active=&amp;quot;$route.path&amp;quot; class=&amp;quot;el-menu-demo&amp;quot; mode=&amp;quot;horizon原创 2019-03-02 17:52:49 · 22712 阅读 · 17 评论 -
vuejs项目如何修改node_mudule为公用文件?
vuejs修改node_mudule默认路径,多项目开发,可减少内存浪费 最近整理之前做过的项目的时候,发现转移的资源内存太大?! 查看了一下,发现之前每次都是单独引入vuejs、element-ui等等前端框架。 上手了之后,发现之前的这种做法,太浪费内存了,而且管理起来也不方便。 这里总结一下:将所有项目的vuejs和element-ui等通用框架部分...原创 2018-07-30 14:02:49 · 5831 阅读 · 5 评论 -
element-ui表格组件table踩坑总结
table组件中,基本情况简述: element框架的table组件,内容涵盖以下总结知识点,内容比较基础,知识有点交叉。对比学习更易于理解、应用和掌握。常用知识点:table边框设置(行边框、全边框)tr鼠标悬停样式(斑马条纹、highlight)、点击展开trtd文字溢出处理与提示、td鼠标悬停提示tr含有radio、checkbox的table表格(单选 、多选...原创 2018-08-29 16:36:51 · 18361 阅读 · 2 评论 -
Element-ui导航组件NavMenu导航高亮设置
Element-ui导航组件: NavMenu 导航HighLight 高亮设置以上就是关于“ Element-ui导航组件NavMenu导航高亮设置 ”的全部内容。原创 2018-06-12 01:51:41 · 13047 阅读 · 1 评论 -
关于element-ui的upload文件上传组件的使用技巧总结
关于element-ui的upload文件上传组件的使用技巧 简单说几点: uploader组件使用中的几个常见问题和解答 1. upload文件类型、大小的筛选; 2. 多文件上传的配置; 3.文件列表的相关操作; 4.文件上传成功、上传失败、删除前、删除后等等状态的定义与回调等等; 5.缩略图的样式定义; 6.文件个数的限制; 7.上...原创 2018-08-29 10:27:29 · 7485 阅读 · 0 评论 -
element-UI框架使用validate.js的form校验规则(+自定义验证代码)- 应用篇
element-UI除了官方给出的校验规则,还可以自定义(举例如下)(官方说明)引入:Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator具体使用:以上就是关于“ element-UI表单组件:校验规则(自定义验证代码)- 应用篇 ” 的...原创 2019-03-13 13:29:16 · 12224 阅读 · 1 评论 -
element-UI级联选择器(Cascader 回显、默认显示项) - (返回结果的)格式转化 - 代码篇
el-cascader组件 :(返回结果的)格式转化有时候会报错:TypeError: thsAreaCode.replace is not a function (bug截图如下)说白了就是该组件结果返回获得的是个数组,而不是字符串。所以不能使用.replace方法去转化格式。因而:才有了下面修改后的代码。为了解决上述问题,先看文章内的举例代码:参考文章:(element-U...原创 2019-03-26 17:57:43 · 44005 阅读 · 4 评论 -
element-UI级联选择器(Cascader)获取label值 - 代码篇
element-ui级联选择器(Cascader)获取级联对象 :主要是想获取:label值、value值效果图预览:代码参考如下:<el-cascader ref="cascaderAddr" :options="addressOptions" change-on-select v-model="form.areaCode" @blur="handleAddressFu...原创 2019-03-26 17:57:49 · 48181 阅读 · 3 评论 -
element-UI组件el-button样式覆写 - 生效篇
踩坑:el-button样式覆写表单代码参考:<!-- 表单区域 --><div class="wd1200 form-container"> <el-row :gutter="0"> <el-col :span="12" class="bg1"> <div id="form-cnt"> ...原创 2019-03-21 23:13:15 · 49091 阅读 · 2 评论 -
element-UI响应式(布局原理)讲解 - 贴文篇
element-UI响应式(原理)- 讲解element-UI官方说明:响应式布局参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。Element 额外提供了一系列类名,用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要,请自行引入以下文件:import 'element-ui/lib/th...原创 2020-04-29 15:54:53 · 33058 阅读 · 1 评论 -
如何在scoped不污染组件样式的前提下,实现el-input组件样式覆盖?
如何在不污染组件样式的前提下,实现el-input组件样式覆盖?踩了个坑,无论怎么修改样式的权重,都无法覆写element-ui的el-input组件的边框样式。唯一能看效果的就是在浏览器端F12之后,修改样式。方法:一个自定义新建的组件(内部提前定义好覆写的样式),在main.js中全局引入,然后在目标页面import引入组件在element-ui的源码文件:…/element-...原创 2019-03-21 23:13:46 · 1181 阅读 · 0 评论 -
element-UI 弹出组件dialog的遮罩层在弹出层的上面 - 解决篇
element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面?bug演示:解决办法:将dialog组件剪贴到最父级div元素之下,以“子一级元素”的方式去定义设置。多半可以解决上述问题。以上就是关于“ element-UI 弹出组件dialog的遮罩层在弹出层的上面 - 解决篇 ” 的全部内容。...原创 2019-03-12 15:02:17 · 14910 阅读 · 5 评论 -
element-UI栅格系统缩放,导致页面布局效果bug? 叠加?错位?
这里截图为例说明一则bug,请bug对号入座。页面的栅格缩放,导致页面布局发生叠加错位?一、坑1 · 引言: (先来一则bug代码)&amp;amp;lt;el-card v-for=&amp;quot;(resume,key) in resumes&amp;quot; :key=&amp;quot;key&amp;quot; class=&amp;quot;item&am原创 2019-03-12 15:09:02 · 13394 阅读 · 2 评论 -
vue 给页面添加enter回车事件 - 代码篇
vue 如何给页面添加enter回车事件?主要代码: @keyup.enter.native="ajaxLoginApi()" 代码示例: &lt;el-form ref="form" :model="form" :label-position="labelPosition" label-suffix原创 2019-03-11 18:31:07 · 18416 阅读 · 1 评论 -
vue.js项目中,关于element-ui完整引入、按需引入的介绍
Element-ui引入方式,简单说来有两种:完整引入、按需引入 下面就这两种方式,简单说一下如何操作,详细请参考官网相关文档;1. 完整引入import Element from 'element-ui';//样式文件,需单独引入import 'element-ui/lib/theme-chalk/index.css';对应的代码,如下:Vue.use(El...原创 2018-05-21 10:55:43 · 24331 阅读 · 0 评论