关注
分享
文章平均质量分 89
都是一些element使用后的经验性总结，以及在使用element脚手架开发中遇到的常见问题。涉及面不一定全面，但一定大有收获！
俗话说：师父领进门，修行在个人。
权当抛砖引玉了， 愿后期都有不一样的飞跃。
后期文章，陆续有来···
草巾冒小子
分享[前端技术主页] http://www.lzindex.com/
展开
-
js中string字符串转换为JSON对象 - 方法大全（4种）
js中string字符串转换为JSON对象 - 方法大全（4种）jQuery插件支持的转换方式：示例：//jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 $.parseJSON( jsonstr ); 浏览器支持的转换方式(Firefox，chrome，opera，safari，ie)等浏览器：示例：//可以将json字符串转换成json对象 JSON.parse(jsonstr); //可以将json对象转换成json对符串 J原创 2020-11-18 00:52:53 · 3261 阅读 · 1 评论 -
保证elementUI组件文本域内容为json
前端如何保证elementUI之文本域组件的内容为json格式（json对象）解决办法：js中string字符串转换为JSON对象 - 方法大全（4种）原创 2020-11-18 00:49:59 · 2403 阅读 · 0 评论 -
vue+element【后台案例 · 搜集 · 集锦】
案例一：https://github.com/taylorchen709/vue-admincnblogs.com · 博客地址CSDN · 博客地址简书 · 地址github · 源码地址vue-admin · 演示Demo地址效果图 · 截图：案例二：Vue+elementui的后台管理系统模板CSDN 博客地址github源码地址 【master分支】效果...原创 2019-11-27 15:38:47 · 1228 阅读 · 0 评论 -
vue-cli3.0（创建项目）如何引入element-ui（指令篇）
vue-cli3.0新创建的项目，如何引入element-ui？原文地址：点击查看vuejs官方地址：了解详情原创 2019-11-20 16:39:16 · 2033 阅读 · 1 评论 -
elementUI响应式布局@media：基于断点的隐藏类（文档篇）
官方文档 · 说明参考：响应式布局 · 文档说明基于断点的隐藏类 · 文档说明Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：import 'element-ui/lib/theme-chalk/display.css';包含的类名及其含义为：.hidden-xs-only - ...原创 2019-04-26 13:48:09 · 10793 阅读 · 2 评论 -
el-radio（自定义样式）获取选中label值 + 选中状态 + 拼接String + post提交 - 踩坑篇
注意点：需要使用 label传值，后台接什么，你就传什么 （这个需要和后台事先确定好）使用@change事件，监听鼠标点击事件，但并非是在每个el-radio对象上都添加该事件，这一点就不同于el-checkbox的@change事件，（具体代码对比：可参考项目的searchMain.vue 条件查询，进行比较学习）获取<el-input type='textarea'>的聚...原创 2019-04-19 09:01:34 · 14008 阅读 · 1 评论 -
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 · 40292 阅读 · 1 评论 -
elementUI弹框form多元素表单问题 - 抛砖篇
疑问1：elementUI的这个MessageBox弹框能否添加多个表单元素?疑问2：如果能添加多个，怎么添加？疑问3：使用el-dialog组件如何调用？通过上述实践，总结发现还是使用el-dialog组件，比较坑少，直接，出效率！而且该组件还支持： 嵌套 Dialog 的场景，能有效避免 遮罩层级的样式 bug ~~正常情况下，我们不建议使用嵌套的 Dialog，如果需要...原创 2019-04-15 09:16:10 · 7296 阅读 · 2 评论 -
elementUI 分页组件Bug ，为什么会 infinity ？
bug截图：上面的bug不一定是框架的原因，也有可能是因为前端传参错误导致的，但是已经找了所有.vue页面的逻辑，发现所有页面的定义和逻辑都和之前保持的一致。不i知道...原创 2019-04-10 17:40:07 · 2823 阅读 · 0 评论 -
elementUI 分页组件的使用 - 踩坑篇
elementUI 分页组件的使用、API调用、获取服务端数据、并初始化渲染页面：（踩坑一则）因每个公司 / 每个项目 / 客户需求 / 都各有差异，所以本例只是demo说解，并非举一反三或万能分页；但是传统的客户需求还是完全能够通用和满足的。一、分页效果图二、elementUI 分页组件的使用 - 应用篇<!-- 分页组件 --><div class="...原创 2019-04-04 17:11:08 · 26051 阅读 · 2 评论 -
elementUI解决el-checkbox自定义样式、@change样式的失效 等bug - 代码示例
大大大大是原创 2019-03-29 18:29:59 · 11450 阅读 · 0 评论 -
element-UI级联选择器(Cascader 回显、默认显示项) - （返回结果的）格式转化 - 代码篇
el-cascader组件 ：（返回结果的）格式转化有时候会报错：TypeError: thsAreaCode.replace is not a function （bug截图如下）说白了就是该组件结果返回获得的是个数组，而不是字符串。所以不能使用.replace方法去转化格式。因而：才有了下面修改后的代码。为了解决上述问题，先看文章内的举例代码：参考文章：（element-U...原创 2019-03-26 17:57:43 · 43959 阅读 · 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 · 48093 阅读 · 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 · 49044 阅读 · 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 · 32998 阅读 · 1 评论 -
如何在scoped不污染组件样式的前提下，实现el-input组件样式覆盖？
如何在不污染组件样式的前提下，实现el-input组件样式覆盖？踩了个坑，无论怎么修改样式的权重，都无法覆写element-ui的el-input组件的边框样式。唯一能看效果的就是在浏览器端F12之后，修改样式。方法：一个自定义新建的组件（内部提前定义好覆写的样式）,在main.js中全局引入，然后在目标页面import引入组件在element-ui的源码文件：…/element-...原创 2019-03-21 23:13:46 · 1146 阅读 · 0 评论 -
element-UI 弹出组件dialog的遮罩层在弹出层的上面 - 解决篇
element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面？bug演示：解决办法：将dialog组件剪贴到最父级div元素之下，以“子一级元素”的方式去定义设置。多半可以解决上述问题。以上就是关于“ element-UI 弹出组件dialog的遮罩层在弹出层的上面 - 解决篇 ” 的全部内容。...原创 2019-03-12 15:02:17 · 14875 阅读 · 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 · 13334 阅读 · 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 · 18379 阅读 · 1 评论 -
element-UI框架使用validate.js的form校验规则（+自定义验证代码）- 应用篇
element-UI除了官方给出的校验规则，还可以自定义（举例如下）（官方说明）引入：Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator具体使用：以上就是关于“ element-UI表单组件：校验规则（自定义验证代码）- 应用篇 ” 的...原创 2019-03-13 13:29:16 · 12098 阅读 · 1 评论 -
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 · 3294 阅读 · 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 · 10605 阅读 · 0 评论 -
element-ui 框架的checkbox组件：点击事件 与 选中判断 - 代码篇
element-ui 框架的checkbox组件：点击事件 与 选中判断 - 代码篇原创 2019-03-02 17:52:13 · 39236 阅读 · 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 · 22597 阅读 · 17 评论 -
element-ui表格组件table踩坑总结
table组件中，基本情况简述： element框架的table组件，内容涵盖以下总结知识点，内容比较基础，知识有点交叉。对比学习更易于理解、应用和掌握。常用知识点：table边框设置（行边框、全边框）tr鼠标悬停样式（斑马条纹、highlight）、点击展开trtd文字溢出处理与提示、td鼠标悬停提示tr含有radio、checkbox的table表格（单选 、多选...原创 2018-08-29 16:36:51 · 18324 阅读 · 2 评论 -
Element-ui导航组件NavMenu导航高亮设置
Element-ui导航组件： NavMenu 导航HighLight 高亮设置以上就是关于“ Element-ui导航组件NavMenu导航高亮设置 ”的全部内容。原创 2018-06-12 01:51:41 · 13009 阅读 · 1 评论 -
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 · 15821 阅读 · 10 评论 -
ElementUI弹框组件 messageBox 如何换行 ？
ElementUI弹框组件 messageBox 如何换行 ？参考博客：element this.$confirm确定框内容换行显示效果图 · 截图示下：demo代码如下：const confirmText = ['您确定要结束招聘吗？','注意：一经确定，该职位招聘信息将会下架且不支持修改，剩余人才币将直接返还到您的账户。'];const newDatas = [];c...原创 2019-09-19 14:20:31 · 7726 阅读 · 1 评论