Element-UI组件使用 --踩坑篇

这篇具有很好参考价值的文章主要介绍了Element-UI组件使用 --踩坑篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.Vue Element ui el-input 键盘Enter事件 导致刷新表单问题

问题描述Element ui 中的el-input,当input仅有一项时,使用@keyup.enter.native事件绑定回车事 件,点击回车之后浏览器会刷新页面

el-input el-dropdown,vue.js,elementui

问题原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件,导致页面的刷新

解决方法1:在el-form加上@submit.native.prevent,禁止表单默认submit事件。

解决方法2:既然el-form只有一个条件是enter会触发submit事件,那就增加一个隐藏条件,比如增加一个隐藏的el-input

el-input el-dropdown,vue.js,elementui

2. el-upload上传图片,action的默认路径为空,自定义接口上传图片,导致调接口出现404的情况

问题描述el-upload action路径为空或#,未使用http-request (覆盖默认的上传行为,可自定义上传),直接使用before-upload 自定义调用接口,同时调两个接口,一个是action的默认行为,另一个是自定义接口,action调用404,自定义接口调用成功,最终需要去除404的接口调用

el-input el-dropdown,vue.js,elementui

问题原因action设置属性为#或者空时,触发上传动作时,会触发action的默认上传的事件,走一遍该标签的本地接口,从而导致接口404

解决方法1:在before-upload事件中添加 return false 来阻止默认事件。

el-input el-dropdown,vue.js,elementui

解决方法2:使用http-request 覆盖默认的上传行为 (未实践此方法,有兴趣大家可以试一下)

3. el-dropdown组件使用时,子选项无法绑定事件的处理

问题描述:正常的element-ui 组件中,点击事件可以通过@click来绑定,但是下拉菜单的组件在子组件上绑定@click事件时无法绑定成功。

场景分析:设置账号的下拉菜单

el-input el-dropdown,vue.js,elementui

原因分析el-dropdown不是原生DOM节点,而此时绑定的click也非原生DOM事件,加上.native可以把自定义事件转变为原生DOM事件,即给父元素的子节点们都加上这个click事件

解决方法1:下拉菜单子组件el-dropdown-item点击事件后加.native

el-input el-dropdown,vue.js,elementui

解决方法2el-dropdown组件提供了点击某个下拉子菜单做不同的操作的方法 command事件

el-input el-dropdown,vue.js,elementui
el-input el-dropdown,vue.js,elementui
知识拓展.native修饰符的使用
.native–监听组件根元素的原生事件,主要是给自定义的组件添加原生事件

父组件增加原生点击事件

el-input el-dropdown,vue.js,elementui
子组件的点击事件(子组件无论点哪里都会触发alert弹窗)

el-input el-dropdown,vue.js,elementui

4. 在一个方法里面同时调用两次this.$notify方法,会出现通知框重叠的问题(如下)

el-input el-dropdown,vue.js,elementui
代码体现

el-input el-dropdown,vue.js,elementui
原因分析:结合源码分析,计算通知的间距时,会取当前元素的高度item.$el.offsetHeight,但是因为vue的异步更新队列有缓冲机制,第一次方法调用时,并没有更新dom,导致取到的高度为0,所以第二个通知只是上移了默认的offset 16px,并没有加上第一个通知的高度。

el-input el-dropdown,vue.js,elementui

解决方法1:使用调this.$nextTick 的方法,具有局限性 适合已知要渲染的信息条数或者数据少

el-input el-dropdown,vue.js,elementui
el-input el-dropdown,vue.js,elementui

解决方法2:使用Promise

el-input el-dropdown,vue.js,elementui
el-input el-dropdown,vue.js,elementui文章来源地址https://www.toymoban.com/news/detail-762995.html

到了这里,关于Element-UI组件使用 --踩坑篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue element-ui el-input输入框绑定@keyup.enter回车事件无效

    由于element-ui把input进行了封装,input外面是多一层div的。 在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现,遇到后可以在网页中查看dom结构分析原因。 所以对于el-input,使用 @keyup.enter是无效的,需要加上 .native 限制符 .native修饰符的作用:

    2024年02月16日
    浏览(55)
  • Unknown custom element: <el-image>无法使用该组件,升级element-ui版本后项目报错

    需求背景: 项目中需要使用图片点击放大,想要使用 el-image 组件,引入后报了下面的错,需要升级element版本,element-ui版本过低,没有该组件。 过程: cnpm i element-ui@2.14.1 --save-dev 升级后,页面报了一千多个错,如Property or method “__v_isRef“ is not defined on the instance 项目页面较

    2023年04月19日
    浏览(47)
  • 如何使用element-ui相关组件如:el-select,el-table,el-switch,el-pagination,el-dialog

    element-ui 官方链接: 组件 | Element https://element.eleme.cn/#/zh-CN/component/installation userTypeOptions后端响应的对象数组数据 表格中添加模板的作用域实现 异步处理 监听status的状态 权限修改异步处理: 几个监听函数与异步请求 axios实现发送异步请求 监听弹窗

    2024年02月07日
    浏览(54)
  • 改变element-ui中el-tabs组件的样式

    2024年01月24日
    浏览(49)
  • 我有妙招-使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法/setCheckedNodes设置不上数据

    使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法/setCheckedNodes设置不上数据  当我们使用el-tree时经常会涉及到回显,有的时候回显失败怎么解决,下面是我常用的两种回显方式 第一种: 第二种: 注意:一定要确保树形选择器里的数据先与上方代码获取到 关于el-tree的

    2024年02月16日
    浏览(53)
  • element-ui日历组件el-calendar选中特定时间以及样式修改

    项目开发中,有需要用到日历的组件,而且需要把某些日期标注起来,在这边标注的小红点我用了 el-badge 具体效果如下图所示:  页面标签: 变量声明: 样式修改: 参考地址

    2024年02月11日
    浏览(70)
  • 基于element-ui el-dialog组件封装,可缩放+可移动的弹窗组件

    源码下载 改组件继承el-dialog组件百分之95属性,可直接对el-dialog进行替换。在项目中我的命名为: vue代码 :搞成组件,路径随意,推荐统一放在组件目录下 拖动及缩放操作js代码: 将skdialog.js注册为指令: 目录: 指令使用:(v-指令名称(SkDialogDrag)) 效果图: 注:吃水

    2024年02月03日
    浏览(61)
  • css实现图标闪烁(Element-UI el-badge标记组件为例)

    本文以Element-UI el-badge标记组件为例,实现el-badge图标的闪烁,其他html元素也可以使用此方法实现闪烁功能。 实现闪烁功能,主要用到下面3个CSS属性 1、@keyframes 利用 @keyframes 规则来创建动画。 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中,您

    2024年02月08日
    浏览(83)
  • 解决element-ui中组件【el-upload】一次性上传多张图片的问题

    前端 后端 后端使用的是multer中间件,用来接收前端发送过来的multipart/form-data形式的数据 multer.js router.js

    2024年02月12日
    浏览(54)
  • element-ui的table实现滚动加载,涵el-table组件封装一份

    重点就是 a d d R o l l L i s t e n e r addRollListener a d d R o l l L i s t e n e r 函数,想快点弄上去看效果的直接弄这个函数吧 如果不在mounted中则一定要this.$nextTick(() = this.addRollListener()) 示例代码 如果你把上面的看过了;只需要在 a d d R o l l L i s t e n e r addRollListener a d d R o l l L i s t e

    2023年04月08日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包