element-plus生产踩坑日记一

2,057 阅读2分钟

主要是坑太多了,发出来给大家,避免一些错误

而且我是按需加载,那这个坑就更多了啊

一、表格

1、表格会出现滚动条丢失情况

比如最后一页返回上一页就没了,可以适度优化,但是无法完全避免,但是问题好很多

解决:

el-table上面这个两个要:max-height="700":height="700"

然后是样式部分

::v-deep(.is-scrolling-left) { height: 659px; overflow: auto; }

这里高度是计算得出的,你需要扣除表头高度

注意:样式部分设置了高度,那么上面高度也要同步,否则会出现滚动条乱跳问题

2、show-overflow-tooltip引发vue深度bug

这个参数大家就别用了,我是这样干了<template #default="scope">

上述问题提交的issuesgithub.com/element-plu…

二、分页

1、分页的page-count不能用,大家曲线救国

issues再上面的里面一起提交了

2、分页的时候增加输入框跳转,出现英文,不行就不要这个功能了吧,国际化问题,不好解决

给出的解决方式:github.com/element-plu…

三、弹窗

这个坑有点大,新手恐怕直接以为不能用

按需加载,弹窗设置为true的时候什么都看不到,但是你检查dom节点是存在的

解决方式:

在全局style部分加入

.el-overlay {  
position: fixed;  
top: 0;  
right: 0;  
bottom: 0;  
left: 0;  
height: 100%;  
background-color: rgba(0, 0, 0, 0.5);
}

官方已经修复,但是依旧会丢失背景蒙版,但是弹窗已经可以了,大家以后注意下这个问题

四、加载优化问题

在已经使用了按需加载的情况下,loadsh文件过大

官方修复github.com/element-plu…

五、el-select按需加载样式丢失

一样全局加入

// 选择项样式丢失
.el-select-dropdown__item {  
font-size: 14px;  
padding: 0 20px; 
 position: relative; 
 white-space: nowrap;  
overflow: hidden;  
text-overflow: ellipsis; 
 color: #606266; 
 height: 34px; 
 line-height: 34px; 
 box-sizing: border-box; 
 cursor: pointer;
}

其他问题:

出现的bug我都提交官方,官方回复还是很快的,不过一般都可以曲线实现,再不行我就自己写了。bate版本每天都有更新!!!

关于按需加载样式丢失的问题,大家能提issues的最好,不提的话看看官方的样式,然后f12去把样式贴过来就好了

暂时就这么多,下次攒一波再发

建议大家都多去看看issues,里面有不少解决方式。