element-ui
违规昵称001
这个作者很懒,什么都没留下…
展开
-
element-ui 传入一个全局配置对象 对按钮组件全局设置size大小
官方文档:在引入 Element 时,可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸,zIndex 设置弹框的初始 z-index(默认值:2000)。按照引入 Element 的方式,具体操作如下:完整引入 Element:import Vue from 'vue';import Element from 'element-ui';Vue.use(Element, { size: 'small', zIndex: 3000 });原创 2022-04-25 10:15:54 · 2426 阅读 · 0 评论 -
element-ui vue input输入框自动获取焦点聚焦
有时候会遇到要输入框自动获取焦点的情况,解决如下:方法一:步骤:1.在script中写directives,注册一个全局的自定义指定 v-focus directives: { focus: { inserted: function(el) { el.querySelector("input").focus(); } } },2.在input框直接使用<el-input ... v-focus></el-.原创 2022-02-28 14:50:59 · 5139 阅读 · 0 评论 -
vue element-ui 键盘输入enter键 触发事件
因为有时候会遇到因为有父级的影响事件不生效的情况,所以需要加.native<el-input class="input-new-tag" v-model="item.nameValue" size="mini" placeholder="请输入名称" :maxlength="20" v-focus @keyup.enter.native="nameConfirm(item)" > </el-input>有时候层级过多,各元素相互影响原创 2022-02-28 14:37:44 · 2614 阅读 · 0 评论 -
element ui el-table表格加载中和自定义无数据状态
表格loading状态(适用于任何标签的加载中状态)指令:v-loading:详见element ui官网的组件 loading加载表格自定义空状态<template slot="empty"><template><el-table v-loading="loading" :data="tableData" style="width: 100%"> <el-table-column prop="date"原创 2022-01-19 17:08:31 · 559 阅读 · 0 评论 -
vue 给某个div设置回到顶部
1.对某个div设置了滚动,想要回到顶部的情况这种情况下一定要找到是在哪个元素下设置的overflow滚动,就在哪个元素下加方法一.在当前页面无法使用ref获取元素时候,可以使用jq简单实现:1.安装jq,引入jqimport $ from 'jquery'2.在对应触发时间里写滚动效果$(".el-main").animate({ scrollTop: 0 }, 100);方法二.对设置了滚动的元素加ref然后进行设置this.$refs.xxx.scrollTop = 02.原创 2021-12-23 18:44:19 · 2805 阅读 · 1 评论 -
element ui无限滚动 InfiniteScroll 触底分页效果 使用及踩坑
因为要做下拉触底效果,刚好看到element ui有这个无限滚动插件,就打算用一下,以前写的那个效果不好。踩坑:1.刚开始不知道需要安装,所以就直接使用导致报错Failed to resolve directive: infinite-scroll2.在直接使用的时候,滑动一直不生效。后来换到别的页面是生效的,反复排查发现在顶级div我用到了v-if,v-if初始值是false,在调用了接口之后才是true,这种情况下滚动不生效3.可能是由于我页面布局的原因,导致我在使用infinite..原创 2021-11-22 18:10:26 · 8265 阅读 · 4 评论 -
vue cli3打包报错
报错1: 272:1 error Irregular whitespace not allowed no-irregular-whitespace报错是没有用规范的写法,有多余的空格报错2:error 'scope' is defined but never used vue/no-unused-vars报错是element-ui的scope,定义了但没用过报错1解决:由于我不喜欢vscode的自动格式化效果,一屏放不下几行代码,所以我不打算格式化我的代码来解决这个问题,最后原创 2021-09-28 10:42:17 · 687 阅读 · 0 评论 -
element-ui el-select 超出用...表示
如图所示,el-select 组件中当内容过长,想要选择框中的内容省略,用…表示,.el-input__inner{ padding: 0 20px 0 10px; border: 1px solid #DCDFE6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: normal; white-space: nowrap; }写了如上代码发现只有.原创 2021-09-23 10:42:30 · 3276 阅读 · 4 评论 -
element-ui 被el-tooltip包裹的标题,点击跳转后 回到原页面不消失的处理(弹出后不消失)
图1:图2:bug场景:如上图1所示,标题只展示一行,外层包裹tooltip,鼠标移入展示全部,当点击标题时,新打开一个详情页面。当从详情页面再切换到原列表页面时,tooltip仍然停留,没有消失,只有在页面有其他行为时才消失。测试提出了这个bug,最终我找到一个解决方法解决elementui el-tooltip,在弹框之后再次出现的问题参考这个方法成功解决了问题代码如下:1.新建clearTabIndex.jsconst vueClearIndex = {}/** 解决tool原创 2021-09-23 10:30:52 · 4266 阅读 · 5 评论 -
elementui 日期选择器 el-date-picker 设置当前日期的月份在最后面,不显示下个月
如上图所示,当前日期是8月份,需求要求9月份就不要显示了,不友好,并且当前日期后面的不可点击效果如下图:需要设置default-value默认值代码如下:<el-date-picker v-model="date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" pref.原创 2021-08-30 14:32:57 · 2664 阅读 · 0 评论 -
elementui el-autocomplete 当输入建议调用了接口后为空时,输入建议的下拉框一闪而过然后为空,去掉这个状态的解决方法
如图所示,要实现在没有数据的时候就不要闪下面这个加载中,解决方法步骤:1.el-autocomplete自带的属性 debounce(输入建议的去抖延时),把它设为02.写自定义样式让所有下拉列表隐藏:.el-autocomplete-suggestion{display:none;}3.在querySearch函数中让数据不为空的下拉列表显示(实现方法是通过自定义class名,然后让指定的class显示)代码如下 <el-autocomplete pop.原创 2021-06-11 09:51:43 · 5647 阅读 · 1 评论