element ui 树形嵌套表格_Vue+element(v2.3.2)(第二期)

这篇博客是关于Vue结合Element UI(v2.3.2)在实现树形嵌套表格过程中遇到的问题及解决方法的记录。内容包括element-NavMenu的背景色误解、A页面弹窗跳转B页面的处理、谷歌浏览器中块级元素的白色框bug、input框blur后的点击问题以及Vue-router-tab的页签选择。作者提倡利用碎片时间学习和巩固前端知识点。
摘要由CSDN通过智能技术生成
16d0a9f5cf39da56e1684ccf8209ea6d.png

Vue+element(v2.3.2)(第二期)

0aab12c0338ce49419ac2b52bcb75126.png

大家可以像我一样,利用碎片时间去记录,温习这些零碎的知识点及bug痛点,让自身的基础更加扎实。我的前端道路与你们同行,大家一起加油吧!

01

element-NavMenu使用

7eaff767976e16bef05634a02bcb12a6.png

dfc8a547f1bece19e31be021a76d5f89.png

b8cbca177c74d86215437916dab2fdd8.png

解决方法:

6141f7d02beeb0efaf6b6d825b0ba7cb.png

记录一波,文档说的是背景色,实际上用到的是:hover的颜色(备注:#1579BD->rgb(21,121,189))

3e8d1c2a14346d15e8ea982f02a761bd.png

02

A页面弹窗层跳到B页面,弹出层未消失

解决方案:A页面跳转B页面时候,将A页面的弹窗给隐藏掉

3e8d1c2a14346d15e8ea982f02a761bd.png

03

css inline-block 块级元素在google浏览器上面有白色框bug

点击前:2a6281a4076a7a51c6c873441441a673.png点击后:5ff51c5e96a99e31cbdd7453f0d61b9b.png

bug痛点:a1855af6df2b722782d01496347df161.png

a1855af6df2b722782d01496347df161.png

解决方案:

elment-ui里面的el-menu里面有一个ul,相当于在ul里面嵌套图片就有bug,解决方案是将img外面的el-menu去掉,重新加一层div

3e8d1c2a14346d15e8ea982f02a761bd.png

04

bug制造机

2d3657b8c920caf06e90ea4eae0aff8f.png

30f3de2a638580b2622dcfc61f6055c1.png

af0a323a184a398241727af38af01959.png

bug痛点:input框blur事件之后,点击其他地方需要点击两次才能点击成功。

解决方案:刚开始,我还因为是事件冒泡,还加了

e.stopPropagation(),结果还是不能解决,后来发现是loading:true阻止了这个点击,真的感觉这个bug挺奇葩的,哈哈!

05

页签选择~Vue-router-tab

一个好看的后台管理都需要一个好的页签。

实践经历感觉这个挺不错的,值得推荐!

3e8d1c2a14346d15e8ea982f02a761bd.png 92e8ef3ca5f17c57809c93b0903d5b63.png                  

总结:

文中的代码可能不一定是最优代码,要是你有更好的代码欢迎评论。喜欢的可以给我点赞鼓励哦!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值