草庐IT

el-submenu

全部标签

Element UI更改下拉菜单el-dropdown-menu样式

如果css不是scoped模式可以直接修改,否则需要另外写个style标签或者新建一个css文件,再引入html:{{name?.at(0)}}{{name}}基本资料更换头像重置密码退出新建css文件准备样式:/*整体背景色和圆角*/.el-dropdown-menu{background-color:#24262d!important;border:0pxsolid#00487f!important;border-radius:5px;}/*下拉框定位*/.el-popper{position:absolute!important;top:56px!important;}.el-poppe

关于el-dialog中@close事件和取消确认按钮并用,会触发两次关闭表单的操作

关于el-dialog中@close事件和取消确认按钮并用,会触发两次关闭表单的操作简介:el-dialog绑定了close方法,el-dialog中的子元素【确认按钮】绑定了click事件,当执行子元素绑定的click事件时,除执行子元素绑定的click方法中的语句,还会执行close中的语句。当绑定的close和click事件中执行逻辑不一致时,最终实现的是close中的逻辑。解决方法:当close和click按钮的业务逻辑不一致时,我们将取消(点击右上角的x)的逻辑写在before-close的方法中当close和click按钮的业务逻辑一致时,我们将取消(点击右上角的x)的逻辑可以写在

Vue2 + element ui el-select 远程搜索分页懒加载功能实现

新建指令:    1、在src目录下新建文件夹 directive/loadmore        2、在loadmore文价夹下新建 elSelectLoadmore.js和index.js 文件:           elSelectLoadmore.jsexportdefault{inserted(el,binding,vnode){constSELECTWRAP_DOM=el.querySelector('.el-select-dropdown.el-select-dropdown__wrap');SELECTWRAP_DOM.addEventListener('scroll',fun

el-cascader的回显解决

el-cascader内部是数组形式的,而大部分接口只需传入数组的最后一个字段,但修改时候往往也只返回这最后一个字段,导致el-cascader无法正确回显我们只需要在获取到返回的字段后传入下面这个函数即可完成el-cascader的回显getParentsById(list,id){for(letiinlist){if(list[i].no==id){//这里的no根据你的需求可进行改变//查询到就返回该数组对象的valuereturn[list[i].no];}if(list[i].children){letnode=this.getParentsById(list[i].children

【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式

首先需要了解俩个函数,row-class-name、cell-class-name这里以cell-class-name单元格样式为例row-class-name行的className的回调方法,也可以使用字符串为所有行设置一个固定的className。Function({row,rowIndex})/Stringcell-class-name单元格的className的回调方法,也可以使用字符串为所有单元格设置一个固定的className。Function({row,column,rowIndex,columnIndex})/String 审批意见:{{item.opinion}}-->{{i

Element UI 中el-input 框回车触发页面刷新问题及解决

问题描述当el-input获取焦点后按到回车按钮会刷新当前页面el-form:model="queryParams"ref="queryForm"size="small":inline="true"> el-form-itemlabel="关键字"> el-inputv-model.trim="queryParams.keyword"placeholder="请输入"clearable>/el-input> /el-form-item> el-form-itemclass="el-btn-box"> el-buttonclass="el-btn-search"type="primary"i

el-table 多表格弹窗嵌套数据显示异常错乱问题

1、业务背景使用vue+element开发报表功能时,需要列表上某列的超链接按钮弹窗展示,在弹窗的el-table列表某列中再次使用超链接按钮点开弹窗,以此类推多表格弹窗嵌套,本文以弹窗两次为例最终效果如下示例页面2、具体实现和问题抛出{{formatTaskType(scope.row.Type)}}查看{{(scope.row.AddTime*1000)|formatDate(2)}}查看查看import{GetXXXReportList,ExportXXXReportList}from'@/api/reportManage'consturlQuery=['id|number','type

Element UI中el-tree 添加右键菜单的方法,附带问题和解决方案

1、在el-tree中添加方法 @node-contextmenu="rightClick"2、建立一个右键组件,可以使用el-menu组件,优点是,可以借助el-menu的selec方法进行增删改查以及样式不用手写了,弊端是不容易获取点击的Dom,先暂时这样写吧新增课时删除3、methods中的写法rightClick(e,data,node){this.menuShow=false//先把模态框关死,目的是第二次或者第n次右键鼠标的时候它默认的是truethis.menuShow=truee.preventDefault()//关闭浏览器右键默认事件this.rightMenu={top:

解决MySQL: Failing package is: mysql-community-server-8.0.34-1.el7.x86_64

TheGPGkeyslistedforthe"MySQL8.0CommunityServer"repositoryarealreadyinstalledbuttheyarenotcorrectforthispackage.CheckthatthecorrectkeyURLsareconfiguredforthisrepository. Failingpackageis:mysql-community-server-8.0.34-1.el7.x86_64 GPGKeysareconfiguredas:file:///etc/pki/rpm-gpg/RPM-GPG-KEY-mysql这个是由于由于

【Element UI】解决 el-dialog 弹框组件设置 custom-class 样式不生效问题

文章目录问题描述解决方法问题描述template> el-dialogclass="myDialog"v-model="show"title="弹窗"custom-class="customDialog"> div>弹窗内容div> el-dialog>template>script> //省略。。。。script>stylelang="less"scoped>/*此次设置弹窗高度并不生效*/.customDialog>.el-dialog__body{height:85vh;}style>解决方法去除scoped标识template> el-dialogclass="myDialog"v-