随笔分类 -  vue / element ui

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
el-table单元格内容较多时隐藏，鼠标hover时显示并且显示的内容可以换行
摘要：## 说明 在使用element的table表格的时候,发现单元格内容较多的情况下 在`el-table-column`上面使用了`show-overflow-tooltip`属性:当内容过长被隐藏时显示 tooltip 但是他是一整行展示,不太好看 ![image](https://img2023 阅读全文
posted @ 2023-07-06 13:37 天宁哦 阅读(1599) 评论(0) 推荐(0)
elementui局部全屏无法显示tooltip，popover等基于vue-popper类开发的组件
摘要：因为这些元素都是插入到body里面的，而当某一div全屏后由于层级原因无法显示这些组件，解决办法如下 ![image](https://img2023.cnblogs.com/blog/3028693/202306/3028693-20230609114332847-1422644774.png) 阅读全文
posted @ 2023-06-09 11:44 天宁哦 阅读(1228) 评论(0) 推荐(0)
element-ui 对话框中嵌套对话框及其遮罩层关闭问题
摘要：## 说明 经常会遇到对话框中打开对话框的对话框嵌套问题,可能会出现关闭内部对话框的时候发现遮罩层还在 主要是Dialog组件在全局只维护一个遮罩层DOM节点，然后在关闭当前遮罩层的时候通过堆栈恢复上一个遮罩层位置。当我们打开第二个页签的弹窗时其实是把第一个弹窗的遮罩层给强行征用了，所以当我们切换回 阅读全文
posted @ 2023-06-08 10:26 天宁哦 阅读(2123) 评论(0) 推荐(0)
Element 表格固定列横向滚动条无法拖动的问题解决
摘要：在Element-UI中，当对表格列进行固定后，底部的横向滚动条就无法拖动了，主要的问题就是固定区域盖住了横向滚动条。 ## 方案一：修改el-table__body-wrapper样式的层级，随便设个层级就可 ```css ::v-deep .el-table__body-wrapper{ z-i 阅读全文
posted @ 2023-05-24 15:38 天宁哦 阅读(1622) 评论(0) 推荐(0)
element ui的Loading组件在Dialog对话框内使用
摘要：说明 想要实现在Dialog对话框上加载效果, 父组件开启loding,子组件关闭 首先需要在父组件传值的时候把this.$loading的结果赋我们定义好的变量 代码 父组件 <page-details :data="details" ></page-details> // data部分 data 阅读全文
posted @ 2023-05-17 11:10 天宁哦 阅读(3528) 评论(0) 推荐(0)
element ui的Upload 上传和Image 图片组件使用整理
摘要：说明 收集整理在开发中遇到的对于上传组件和图片组件的使用 Upload上传组件 修改上传按钮的默认宽高 ::v-deep .el-upload--picture-card { width: 80px; height: 80px; line-height: 85px; } 修改默认的上传组件图片列表展 阅读全文
posted @ 2023-05-16 17:40 天宁哦 阅读(143) 评论(0) 推荐(0)
el-button之slot=“prepend“和slot=“append“ 用法及区别
摘要：说明 <el-button slot="append"></el-button>里的 slot="append" 就是一个UI摆放的位置,其实就是封装的样式布局。 append：代表放在紧贴在依赖组件的后面 prepend：代表放在紧贴在依赖组件的前面 阅读全文
posted @ 2023-05-12 10:25 天宁哦 阅读(908) 评论(0) 推荐(0)
element ui的el-upload上传组件中使用el-image的图片预览
摘要：问题 想在element ui的el-upload上传组件中使用el-image的图片预览，这样就可以放大和缩小还有多张图片切换 因为el-upload提供的是使用对话框查看图片,不能放大缩小还不能左右切换 说明 在el-image组件内的预览功能是使用的el-image-viewer这个小组件实现 阅读全文
posted @ 2023-05-11 16:14 天宁哦 阅读(2203) 评论(0) 推荐(0)
element ui 的Dialog 对话框内的input输入框内回车导致界面刷新
摘要：问题 使用element ui 的Dialog 对话框内的input输入框内回车导致界面刷新,对话框也会自动关闭 解决 在对对应的事件后面加上.native.prevent属性,就可以阻止回车提交事件 由于我只想在回车后,开始搜索,就使用@keyup.enter <el-input v-model= 阅读全文
posted @ 2023-04-27 10:53 天宁哦 阅读(747) 评论(0) 推荐(0)