使用el-tree的坑之一,显示异常
个人BUG解决记录用
尽量用z-tree, 别用el-tree
先上视频,
好吧视频不让上传
下方明显看到点击checkbox的时候左侧与目录树中间的位置变成了黑色,接下来我说一下我发现BUG以及解决问题的过程
复现BUG的过程
- 收到测试的问题后我还很疑惑,因为只有PC有这个问题,web是正常显示的,所以我先准备在自己本地上复现,但是是很稀有的概率才会复现
- 因为我使用了scrollintoview是用来点击文件夹进行目录树定位的,所以它是我第一怀疑对象。所以我把每个文件夹都弄得很长,看看是不是定位导致的黑色块。经过十几分钟的点点点发现没有复现出来
- 其次我想是不是由于布局等等样式导致PC渲染出现了问题,所以我开始随意点点。然后发现在垂直滚动滚动条不置顶且有水平滚动条的前提下才可以复现这个问题,所以我开始排查el-tree我给的样式
- 发现el-tree给的样式是display: table; 这是我为了添加水平滚动条新增的穿透样式,当我把他注掉后发现问题解决了,没有黑色块了。但是我又想要水平滚动条的样式该怎么办呢,所以我最后使用的是display: grid; 解决的
总结:把display: table; 改成display: grid; 就可以了
这个bug对于你们可能没有什么参考性, 我只是分享我找到bug并解决问题的过程