草庐IT

el-tooltip

全部标签

NavMenu导航菜单el-submenu点击事件及激活状态变化

记录多级菜单时,NavMenu导航菜单的一级菜单点击事件以及当前激活状态变化原因:由于项目的需求变化,原本是点击二级子菜单才发生跳转,点击子菜单后,el-menu组件也会执行@select的方法,导航栏的菜单也会对应变成激活状态。但是,需求变成点击一级菜单也可以发生跳转,默认跳转到第一个子菜单的界面,el-menu没有实现可以点击el-submenu这一功能。解决方案:1.在el-submenu标签添加点击事件,@click.native,然后再从点击事件内实现跳转等事务,因为我的功能是默认跳转到第一个子菜单,故复用了@select的方法注意:单纯使用@click没有效果2.当前激活状态的改变

Element VUE修改 el-input和el-select长度

 没有设置样式之前,采用默认样式,界面如下: 模拟代码如下有效无效 为了美观需要修改下样式,使文本框与下拉框的长度一致第一种:添加style属性,采用行内样式修改长度style="width:200px" 第二种:添加class属性,采用内部样式 stule标签中设置长度 .test{ width:200px; }第三种:找到element-ui.scss,采用外部样式//设置form表单输入框,下拉框长度统一.el-form-item{.el-input{width:200px;}.el-select{width:200px;}}

Vue——printjs打印el-table,echarts等打印不全,异常解决

PrintJs简单使用PrintJs官网地址:https://printjs.crabbly.com/1、可以从GitHub版本下载最新版本的Print.js:https://github.com/crabbly/Print.js/releases2、npm安装npminstallprint-js--save更多参考:https://blog.csdn.net/sunxiaoju/article/details/126284860echarts无法打印解决修改print.js的getHtml,增加对canvas的处理,将echarts转为图片:getHtml:function(){varinp

Element plus el-table 鼠标滚动失灵的问题及解决办法

Bug:ElementUIel-table鼠标滚轮下滑动失灵的情况我测出来的这个问题条件很苛刻,需要达到以下几个条件才会触发:1.elementplus(其他版本没试)2.el-table-column组件有fixed属性时3.template标签中有el-button,并且el-button有size=“small”时4.我的浏览器缩放(Ctrl+滚轮)达到110%时会出现向鼠标滚轮下滑动失灵的情况,经过排查是el-button的size的问题,size为small值时,按钮高度是24,我的做法是给按钮加一个类,改变按钮的默认高度为22px,滚动失效问题完全解决   但是并不能完全解决问题,

【element ui】 el-popover 样式修改不生效解决方法

①基本结构个人中心退出登录②问题在修改el-popover的样式的时候,和往常修改elmentui样式一样就是不起效果。使用::v-deep或者是/deep/样式穿透都没有效果。③原因看了一篇博主的博客才得知,原因是el-popover生成的div不在当前组件之内,甚至不在App.vue组件的div内,他和App.vue组件的div平级。所以需要全局设置style。④解决办法官网中提供了一种修改气泡卡片的样式的方式。我们先使用这个方式定义一个类名。然后再用这个使用这个类名去写样式发现气泡卡片样式并没有生效了一些。在百度上查阅了很多人写的解决办法得知要这样使用。写成.el-popover.my-

el-select报错:vue.esm.js?5cd5:5105 [Vue warn]: <transition-group> children must be keyed: <ElTag>;无法选中

目录一、问题二、原因及解决方法三、总结Tips:嫌麻烦可以直接看总结中有颜色的字体即可!一、问题1.使用elementselect控件时有警告(childrenmustbekeyed:)且无法选中下拉项vue.esm.js?5cd5:5105[Vuewarn]:childrenmustbekeyed:foundin--->    atpackages/select/src/select.vue     atsrc/projects/comen/equipmentManagement/historyTrack/index.vue      atsrc/views/equipmentManagem

vue中使用elementUI使用el-tabs,切换Tab如何实现实时加载,以及el-table表格使用总结

当我们在开发中遇到tab切换,这时候用el的el-tabs感觉很方便但当我在把代码都写完后,发现一个问题就是页面打开时虽然我们只能看见当前一个tab页,但是vue会帮你把你写的所有tab页的内容都渲染出来了,只是其他的隐藏了,同时其他tab的js也都走了一边,当你点击tab时js就不会再去请求后台这种机制会造成一个问题,就是如果每个tab页的数据都过大的时候,可能就会导致首次打开页面卡顿现象,同时如果数据库数据在实时发生变化的话,比如你一分钟前打开的这个页面,看的是tab1的内容,看了1分钟后我想看tab2的内容,但此时tab2的内容后台数据库已经发生变化了,你能看到的只是1分钟前的数据,那该

echart的tooltip自动展示

引入js文件import{autoHover}from‘./tooltip’/***echartstooltip轮播*@paramchartECharts实例*@paramchartOptionecharts的配置信息*@paramoptionsobject选项*{*interval轮播时间间隔,单位毫秒,默认为3000*true表示循环所有series的tooltip,false则显示指定seriesIndex的tooltip*seriesIndex默认为0,指定某个系列(option中的series索引)循环显示tooltip,*当loopSeries为true时,从seriesIndex

当 el-input 组件处于禁用状态时,其 click 事件依然会被触发

当el-input组件处于禁用状态时,其click事件依然会被触发。这是因为click事件是浏览器级别的事件,而不是由el-input组件控制的。即使组件处于禁用状态,其元素仍然存在于文档中,并且可以被鼠标点击。如果您希望在禁用状态下阻止点击事件,请考虑使用@click事件监听器来处理事件,并在组件处于禁用状态时返回false。以下是示例代码:template>el-input:disabled="isDisabled"@click="handleClick"/>template>script>exportdefault{data(){return{isDisabled:true,};},me

Vue3+element ui取消el-select下拉选边框

Vue3+elementui取消el-select下拉选边框需求是:取消下拉选的边框,并且修改下箭头的图标,从其他博主那拼凑修改出来的,适用于我项目的方法,在此做个记录修改前修改后css样式 //取消el-select的边框 :deep(.el-input){ width:100px; --el-input-focus-border:#fff; --el-input-transparent-border:0000px; --el-input-border-color:#fff; --el-input-hover-border:0px!important; --el-input-ho