vue-el-tree目录树在文件列表的checkbox点击后导致目录树与它的中间显示黑色块或白色块的问题

使用el-tree的坑之一,显示异常

个人BUG解决记录用

尽量用z-tree, 别用el-tree

先上视频,
好吧视频不让上传
下方明显看到点击checkbox的时候左侧与目录树中间的位置变成了黑色,接下来我说一下我发现BUG以及解决问题的过程
在这里插入图片描述

复现BUG的过程

  1. 收到测试的问题后我还很疑惑,因为只有PC有这个问题,web是正常显示的,所以我先准备在自己本地上复现,但是是很稀有的概率才会复现
  2. 因为我使用了scrollintoview是用来点击文件夹进行目录树定位的,所以它是我第一怀疑对象。所以我把每个文件夹都弄得很长,看看是不是定位导致的黑色块。经过十几分钟的点点点发现没有复现出来
  3. 其次我想是不是由于布局等等样式导致PC渲染出现了问题,所以我开始随意点点。然后发现在垂直滚动滚动条不置顶且有水平滚动条的前提下才可以复现这个问题,所以我开始排查el-tree我给的样式
  4. 发现el-tree给的样式是display: table; 这是我为了添加水平滚动条新增的穿透样式,当我把他注掉后发现问题解决了,没有黑色块了。但是我又想要水平滚动条的样式该怎么办呢,所以我最后使用的是display: grid; 解决的

总结:把display: table; 改成display: grid; 就可以了

这个bug对于你们可能没有什么参考性, 我只是分享我找到bug并解决问题的过程

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值