![](https://img-blog.csdnimg.cn/320ce3de8cdf489598ba062b89c07ef4.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
element-ui 常用示例专栏
文章平均质量分 56
本栏主要记录开发过程中使用vue全家桶技术栈结合element-ui 的坑点和开发技术问题公关,方便以后更快的解决问题,提高开发效率,做自己的知识储备。
范特西是只猫
自律。
展开
-
解决el-dialog里嵌入el-tabs卡死的问题
【代码】解决 el-dialog 里嵌入 el-tabs 卡死的问题。原创 2024-05-30 17:45:30 · 529 阅读 · 1 评论 -
vue实现 Element-UI 的 el-upload 图片文件上传 demo
1.上传效果2.vue实现代码(比较简单的demo,直接看) <template> <div class="content"> <el-upload class="avatar-uploader" action="" :http-request="handleRequest" :show-file-list="false" :disabled="loading" :before-uploa原创 2022-03-18 17:42:40 · 1910 阅读 · 0 评论 -
vue element el-date-picker 当前日期之前的日期设置不可选状态
1. 主要的代码就是这两句picker-options="expireTimeOption"expireTimeOption: { disabledDate(date) { //disabledDate 文档上:设置禁用状态,参数为当前日期,要求返回 Boolean return date.getTime() < Date.now() - 24 * 60 * 60 ...原创 2019-09-10 18:14:43 · 15530 阅读 · 4 评论 -
element 的 el-cascade 组件如何获取级联选中label和value值
value 好获取,主要是label,我百度了半天都是说用 this.$refs[关联组件名].currentLabels 可以获取,但是这个方法已经过期了。还是自己看文档才发现使用 getCheckedNodes 方法的节点获取。完整的 this.$refs["refSubCat"].getCheckedNodes()[0].label1. 效果2. 代码<el-cascader...原创 2019-08-07 10:46:17 · 13875 阅读 · 2 评论 -
vue 指令实现 el-dialog 模态框拖拽
el-dialog v-draggable width = " 80% " @close = " resetFirst " :visible.sync = " dialogFormVisible " :close-on-click-modal = " false " > < div > 弹窗的内容。。。。原创 2022-04-26 11:44:56 · 3835 阅读 · 2 评论 -
el-tabs 判断拦截阻止切换标签
1. 拦截Element-UI中el-tabs组件的切换效果需求:在切换tabs时,如果当前页面内容没有保存,则拦截切换并提示必填校验信息先看下效果,点击新增,没有填写项目信息直接切换是会被阻止跳转在点击下修改,内容是已经存在的在点击 年度计划,则可以跳转tabs标签页2. element el-tabs before-leave 方法进行拦截3. 坑点有时候必填完后返回 true 或者false 这个方法拦截不到,如 vaild ? true : false 所以建议使用 promi原创 2020-11-05 11:38:53 · 10313 阅读 · 4 评论 -
vue element Cascader 级联选择器 选择任意一级选项 点击收起,点击label选中等问题详解
1. 温馨提示:Cascader 级联选择器 选择任意一级 请切换到 2.12.0 最新版2. 直接步入主题,先看下需求要实现的功能就是一个级联联动效果,但是他是每一级都能够选择,可以看到既可以选商品组,还能选择商品组下面的团队长,也就是他的子级。找到饿了吗的级联选择器,快捷访问地址:然后找到选择任意一级选项点击跳转:Cascader 级联选择器3. Cascader 级联选择...原创 2020-03-06 18:13:46 · 75325 阅读 · 67 评论 -
vue 模态框 el-dialog 实现点击图片查看大图功能
<!-- 图片查看dialog --><img :src="item.content" class="avatar" @click="imgViewDialog_show(item)" /><el-dialog title :visible.sync="imgViewDialogVisible" class="imgView-dialog" :modal="fa...原创 2019-08-14 20:48:45 · 6358 阅读 · 4 评论 -
vue解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
1. 问题: el-cascader 最后一级出现暂无数据2. 原因分析:首先我们分析出现空级联原因是:由于数据是从后台传递过来的,当后端的老铁使用递归算出菜单,然后转换成json传递到前端的时候。就会出现最底层 的子项中 的 children 为空数组,这样就会造成,空级联 的bug存在。3. 解决办法: 使用递归的方式,将最底层中的 children设为undefined3....原创 2019-07-27 10:53:56 · 34973 阅读 · 15 评论 -
vue.runtime.esm.js:1737 TypeError: _self.$scopedSlots.default is not a function
报错 _self.$scopedSlots.default is not a function ,原因:element组件在一个vue组件中重复使用解决方案:此时的解决办法是设置 key如下:一个vue组件中使用了多个 el-table 导致报错,给每个添加不一样的 key 值即可。确保每一个el-table具有唯一性<el-checkbox v-model="isStorNo" c...原创 2019-06-13 18:46:50 · 3855 阅读 · 0 评论 -
vue 封装组件el-select,el-select组件值是对象的解决方案
1.效果(工作中遇到一个问题,记录一下)1.1 核心代码在用select组件的时候,官方给出的例子是option 里面的value绑定一个值(不能是对象,绑定的对象的话就会出问题)。但是在开发过程中,确实遇到了需要绑定对象的时候,看官方文档根本没发现怎么解决,后来通过百度,谷歌才知道,原来在select上面加上value-key = id ,然后在option里面的 :key="item....原创 2019-05-19 18:41:27 · 8574 阅读 · 0 评论 -
vue实现 Element-UI 的 Tree Select 树形选择器组件(二)递归遍历json菜单多级数据
接着上篇文章:vue实现 Element-UI 封装改造Tree Select 树形选择器组件(一),根据后端动态返回数据的渲染tree下拉组件(只提供这部分重要代码参考,完整请在github拉取)github下载地址:https://github.com/xiechunhao/vue-treeSelect1. 先准备一个后端返回的模拟JSON文件,命名为 tree.json{ ...原创 2019-05-14 02:31:17 · 8338 阅读 · 1 评论 -
vue解决element-ui popover点击取消时 popover的显示与隐藏问题
popover时点击取消时 popover的显示与隐藏问题1. popover演示实现效果最近在项目中使用 elementui 中的table组件popover进行开发,官网的案例如果使用数据遍历,操作列使用 <template></template> 做 插槽的话就不行了。2. 解决办法如下在el-popover中加属性 :ref="popover-${scop...原创 2019-05-09 01:22:59 · 29229 阅读 · 18 评论 -
vue实现checkbox点击选择控制element-ui table表单动态列展示与隐藏
1. checkbox控制表单列的显示与隐藏展示效果代码<template> <div class="app-container"> <div class="filter-container"> <el-checkbox-group v-model="checkboxVal"> <el-chec...原创 2019-05-07 14:28:35 · 9891 阅读 · 5 评论 -
vue实现 Element-UI 的 Tree Select 树形选择器组件(一)组件封装
具体代码晚上补上,效果如下原创 2019-05-06 16:26:08 · 34543 阅读 · 42 评论 -
vue element 的 el-cascade 组件如何实现多选点击确认提交操作
1. 实现效果做这个也是自己踩了好多坑,比如:用第三方的 el-cascader-multi 多选组件,不能实现自己想要的效果,element 最新版 2.12.0 就已经有完善,不需要使用那个第三方的了,其他的坑,可以访问 vue element Cascader 级联选择器 选择任意一级选项 点击收起,点击label选中等问题详解<div class="content-item"...原创 2019-09-17 16:31:22 · 8543 阅读 · 1 评论 -
vue element Cascader 级联选择器 选择任意一级选项 点击收起,点击label选中等问题详解
最近在做一个功能,要求级联选择器,选择每一级都可以,于是就先看下饿了么,找了半天发现好像没有这种,只有级联选择最后一级,然后这个又是返回的递归的数据,让我手写重新写一个属实有点浪费时间。找了好久好久,实现找不到,问了下隔壁的前端老哥,他就来帮我找,也是找了好久没有找到,后面他看到我 element 版本是 2.0.11然后把版本切换到最新版,我当时就傻逼了,我特么顿时感觉自己是哥沙雕,我收藏的...原创 2019-09-16 20:53:48 · 48394 阅读 · 48 评论 -
element el-date-picker日期组件常用的开发情况
页面显示的 日期传给后端的是 日期+时分秒<el-date-picker v-model="solveTime" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" align=...原创 2019-08-26 20:19:29 · 1739 阅读 · 0 评论 -
vue element el-Cascader 级联选择器 收起二级菜单的问题解决办法详解
最近做项目经常用到 el-Cascader 这个级联选择器,也是踩过好过坑,这里记录下自己踩的坑。先说一下问题:当在鼠标移动到 组件 位置触发子菜单后,再移动到 指南 位置,但是 组件 的子级菜单并没有收起 ,如此移来移去,让人感觉就像是 指南 下面有子级菜单,其实指南并没有子级菜单。1. 总结一句话:移到父菜单 相应子菜单出现 没有子菜单 则所有子菜单消失2. 解决办法通过 slo...原创 2019-09-19 10:23:29 · 18242 阅读 · 7 评论