草庐IT

el-cascader

全部标签

关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题

1.问题描述当使用在网页中加载本地图片时,会出现图片加载失败的问题,但使用标签可以正常显示。2.原因在element组件上使用相对路径时webpack不会对路径进行处理,导致请求了一个无效的路径。3.解决将改为(注意给src属性加:)【附】::src属性后面的字符串会被当做变量解析使用,而src属性后面的只会被当字符串使用

MySQL—约束:外键约束、语法(添加外键、删除外键)和删除/更新行为(CASCADE、SET NULL和图形化界面删除/更新)

版本说明当前版本号[20230406]。版本修改说明20230406初版本课程的笔记已经更新完毕,各位可以通过点击《黑马程序员MySQL数据库入门到精通,从mysql安装到mysql高级、mysql优化》学习笔记总目录查看所有知识点,同时也能免费下载学习笔记和思维导图。目录文章目录版本说明目录第四章约束4.1概述4.2约束演示用建表语句建表图形化界面建表4.3外键约束4.3.1介绍准备数据图表显示实验测试测试后的图表显示4.3.2语法1).添加外键1、创建表的时候直接添加2、表结构创建好后,额外地添加2).删除外键4.3.3删除/更新行为1).CASCADE2).SETNULL附:图形化界面删

将较大的数组赋值<el-table></el-table>时,会导致页面卡顿,甚至崩溃

遇到的问题:将长度为40的数组数据赋值,我发现loading没有效果,后面发现是页面卡住了,loading直接没有出现。经过查询资料,发现会有卡顿的问题,看到有的博主推荐使用一款叫umy-ui的插件,我就试了试,发现卡顿的问题解决了。官网:http://www.umyui.com/umycomponent/installation安装:npmiumy-ui全局注册:importUmyUifrom'umy-ui'import'umy-ui/lib/theme-chalk/index.css';//引入样式importAppfrom'./App.vue';Vue.use(UmyUi);将el-ta

element ui的Cascader级联选择器选择任意一级选项时实现指定列不可选

elementui的Cascader级联选择器选择任意一级选项时实现某一指定列或者第一列不可被选中应用场景在使用element的Cascader级联选择器选择任意一级选项模式时,需要实现第一列是固定的,不让选中其他可以选中问题最终目标解决方案解决思路:如果不让第一列选中,那么将级联面板的第一列下面的选择器按钮禁用或者隐藏掉即可,同理指定某一列也是如此但是如果页面上同时出现多个级联选择器,直接将面板下面的某一列选择按钮隐藏,那么会导致当前页所有的级联面板某一列的选择器都会被隐藏,显然我们只想要隐藏特定的某一个选择器,在这里我们需要用到Cascader的popper-class属性来指定某一个选择

element ui - el-table 表头筛选

elementui-el-table表头筛选前言情况一:表格没有分页方法代码前言场景:根据表头筛选出表格中符合条件的数据;效果:筛选结果:情况一:表格没有分页方法在列中设置filters和filter-method属性即可开启该列的筛选。filters:筛选的下拉列表,是一个json数组,里面的json对象是{text:‘’,value:‘’}的格式,text是下拉选项的显示内容,value则为选择的值;filter-method:筛选时触发的方法,是一个函数,会传入三个参数:value,row和column,它的作用是决定某些数据是否显示。代码html部分:el-table-column p

vue+element ui中的el-button自定义icon图标

实现button的icon属性自定义一个图标名称,这个自定义的图标名称会默认添加到button下i标签的class上,我们只需要设置i标签的样式就可以了##3.按钮上使用自定义的icon完整代码divclass="lookBtn">el-buttonicon="el-icon-my-message"size="mini"type="primary"@click="checkAllTask">查看任务el-button>div>样式代码::v-deep.el-icon-my-message{background:url('../../assets/images/lookMsg.png')cent

element-plus el-form 表单、表单验证 使用方法、注意事项

element-plus@2.0.6及之后的版本,表单验证不再是同步执行的了另外,element-plus@2.1.4及之后的版本,才可按照官方文档示例正常使用(使用的是两者的中间版本的话,最好先自行确认下正确的constsubmitForm=async(formEl:FormInstance|undefined)=>{if(!formEl)returnawaitformEl.validate((valid,fields)=>{if(valid){console.log('submit!')//位置1}else{console.log('errorsubmit!',fields)}})//位置

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