关于vue+iview中tabs嵌套及实际应用

最近在用vue+iview框架做项目,在实际做项目中根据需求用到iview中的tabs标签页嵌套以及标签页增加删除功能。想着记录下来,以后可能会再用到。下面是页面。由于是公司的项目具体有些地方我会打码,不影响阅读!


1607751577(1).jpg

tabs页面嵌套iview文档上写的很清楚。而且在网上也可以搜到相关的问题,下面是我写的代码。

image.png

tabs嵌套时需要给每一级做好标识,大家看看文档的API再对照代码就可以明白了。

下面是tabs标签页增加删除功能了,我刚开始的时候被删除功能给难住了。


image.png

我刚开始就是这样写的,可是在操作的时候,点击删除会连着删除两个,刚开始不知道怎么回事,后来经过定位分析,因为是这个删除功能会自带一个假删,只是页面上消失了,数组里的数据还是没删。


image.png

这是文档上的,他就是由v-if=true/false控制着的。
然后我再用splice删除一个,在页面上就是删除两个。实际数组就删除了一个。然后我又重新看了看文档,他有一个before-remove方法。我就在删除之前禁止他本身的删除。下面是我写的

image.png

这里最重要的是return Promise.reject();他是组织自删的。不过这里会报出一个错误

但是不会影响功能。我也就没管,各位有办法的话可以告诉我。
还有一个增加功能代码附上。

image.png
最后编辑于:2025-04-21 10:55:47
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
0x7CF1 小时前
SetThrowSegvLongjmpSEHFilter错误和myFuncInitialize 崩溃
java·linux·算法
diving deep6 小时前
springboot集成日志配置文件
java·spring boot·后端·logback
蟹至之6 小时前
【Java】异常的初步认识
java·开发语言·类和对象·异常
lilye666 小时前
精益数据分析(79/126):从黏性到爆发——病毒性增长的三种形态与核心指标解析
大数据·数据挖掘·数据分析
广西千灵通网络科技有限公司6 小时前
基于Java的话剧购票小程序【附源码】
java·小程序·apache
苏小瀚6 小时前
[Java] idea的调试介绍
java·intellij-idea
源码云商6 小时前
基于 SpringBoot + Vue 的海滨体育馆管理系统设计与实现
vue.js·spring boot·后端
JWenzz16 小时前
Redis删除策略
java·数据库·redis·缓存
幻听嵩的留香7 小时前
javaEE课程项目-壁纸管理系统
java·java-ee
liubo666_7 小时前
SpringMVC(结合源码浅析工作流程)
java·spring·springmvc