![](https://img-blog.csdnimg.cn/4ba9ce9ae56b4793b3f151a0f31e9032.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
element
文章平均质量分 51
与element相关的开发文档
尼克_张
好的代码像粥一样,是用时间熬出来的!
展开
-
element-ui的bug记录
7.el-dialog组件在关闭时,会触发子组件的created/mounted生命周期。原因是当visible改变为false,即关闭dialog的时候,如果用户设置了destroyOnClose=true,则执行key++;key是绑定在较外层的div上的,key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。原创 2024-04-29 21:35:15 · 682 阅读 · 1 评论 -
Notification 通知自定义样式
【代码】Notification 通知自定义样式。原创 2024-04-18 14:56:52 · 182 阅读 · 0 评论 -
el-image图片放大后的关闭事件
我们知道el-image的放大是由单独的el-image-viewer组件构成,那么这个组件的方法怎么在el-image中的调用呢,看到源码中有个关闭时的回调函数closeViewer,里面是通过showViewer来控制图片放大的显示与隐藏,那么我们只需要监听子组件的showViewer来做对应的事情即可。那么就换种思路,既然最后是点击那么就监听dom的点击事件吧,只要是关闭按钮以及蒙层都做对应的事情即可。但事与愿违,此种监听子组件的方法存在问题,所以先放弃。原创 2023-02-19 16:36:53 · 1484 阅读 · 0 评论 -
修改element的菜单组件使其变为酷炫风格
首先选给整个头部加背景图,其次munu中配置的background是对所有菜单都生效的,但我们不想改变父菜单,我们就把父菜单修改为transparent,最后为了让父菜单hover时产生平行四边形,利用伪元素配合 transform: skewX(-45deg),并且因为父元素时透明的,所以加z-index:1让图形显示出来。原创 2022-11-10 16:08:57 · 1232 阅读 · 0 评论 -
树组件插槽传值
子组件的scope通过传值的方式传给父组件,其转译为scope.scope.node.label,第一个scope就是要传过来的对象,当然也可以为其他名字,第二个scope为子组件传值时的名字为scope,它才是真正的对象,里面有node,node里有lable和data。最近在写树选择组件时发现无法自定义树选择里的内容,所以准备给树选择增加插槽,利用element的树组件的插槽进行传值,在此记录下。原创 2022-11-01 11:29:07 · 923 阅读 · 0 评论 -
如何调试element-ui源码
一、获取源码:使用 git clone https://github.com/ElemeFE/element二、安装依赖运行 npm run dev 会自动下载依赖,下载完成初始化后在http://localhost:8085三、打包在当前目录命令行终端执行 npm run dist ,执行完成后当前目录多了一个 lib文件夹。这个文件夹中的文件就是打包后的组件及样式,和我们使用npm install element-ui下载下来的依赖包中的lib文件夹内容相同,也就是我们使用时引用的资源。原创 2022-05-17 16:24:51 · 3970 阅读 · 1 评论 -
element的form查询时过滤多余的数据
element的form查询时过滤多余的数据原创 2022-05-09 15:54:25 · 606 阅读 · 0 评论 -
element中关于下拉时位置偏移
最近做项目时发现element的好多组件在存在下拉时会产生偏移,例如select,dropdown,datepicker,究其原因主要是发现页面存在滚动条时,会出现偏移的情况。结合源码popper.js,当屏幕变化或者滚动时,会动态计算元素的定位位置信息,实时改变。<el-select :popper-append-to-body="false" popper-class="popper-select"> <el-option>南京</el-option><原创 2021-09-13 11:44:27 · 9167 阅读 · 5 评论 -
vue中element的上传图片功能
1.上传单张图片<el-form-item label="上传照片" prop="avatar"> <el-upload class="avatar-uploader" action="" :show-file-list="false" :before-upload="beforeUpload" > <img v-if="form.avatar" :src="form.av原创 2021-09-05 17:13:23 · 5856 阅读 · 4 评论 -
element中tree的使用心得
Tree 树形控件的使用还是比较多的,从中也学到了不少的知识,以下是自己在使用中获得的一些心得!this.treeData = [ { id: 1, label: "中国", color: "red", children: [ { id: 100, label: "江苏", children: [ { id: 101,原创 2021-07-04 20:41:35 · 1187 阅读 · 4 评论 -
element中组件的信息内容过长的展示问题
1.表头过长设置slot=“header”,再包裹个tooltip<el-table-column v-for="(item, index) in tableHead" :label="item.label" :prop="item.prop" :key="index" align="center" min-width="120" show-overflow-tooltip > <template slot="header" > &原创 2021-04-07 16:31:36 · 1700 阅读 · 2 评论 -
element中form表单的使用(包含上传功能)
element中form表单的使用<template><div> <el-dialog :title="recycleTitle" :visible.sync="showDialog" width="688px" :destroy-on-close="true" //关闭销毁 :close-on-click-modal="false" //点击蒙层不关闭 :before-close="handle原创 2020-08-23 15:54:52 · 965 阅读 · 0 评论 -
element中随便切换一个tab栏,其他的tab栏也跟着切换?
因为设置了el-tab-pane的name属性,在使用v-for遍历生成tab栏时,el-tabs可以不设置v-model,默认显示第一个,el-tab-pane中也不用设置name属性<el-tabs type="border-card" @tab-click="handleClick"> <el-tab-pane label="饼状图"> <div :id="'first' + index" style="width: 1150px; height:原创 2021-02-22 17:04:07 · 818 阅读 · 0 评论