关于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
© 著作权归作者所有,转载或内容合作请联系作者

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

相关推荐
这里有鱼汤4 分钟前
“对象”?对象你个头!——Python世界观彻底崩塌的一天
后端·python
RainbowSea6 分钟前
跨域问题(Allow CORS)解决(3 种方法)
java·spring boot·后端
掘金-我是哪吒7 分钟前
分布式微服务系统架构第155集:JavaPlus技术文档平台日更-Java线程池实现原理
java·分布式·微服务·云原生·架构
RainbowSea10 分钟前
问题 1:MyBatis-plus-3.5.9 的分页功能修复
java·spring boot·mybatis
前端 贾公子14 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
不学会Ⅳ1 小时前
Mac M芯片搭建jdk源码环境(jdk24)
java·开发语言·macos
虫小宝1 小时前
高佣金返利平台监控体系建设:APM、链路追踪与佣金异常预警系统技术实现
java
sniper_fandc2 小时前
SpringBoot系列—入门
java·spring boot·后端
代码的余温3 小时前
Maven引入第三方JAR包实战指南
java·maven·jar
pianmian16 小时前
类(JavaBean类)和对象
java