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

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

相关推荐
不太可爱的叶某人几秒前
【学习笔记】深入理解Java虚拟机学习笔记——第1章 走进Java
java·jvm·笔记·学习
镜舟科技17 分钟前
StarRocks Lakehouse 如何重构大数据架构?
大数据·starrocks·数据分析·湖仓一体·物化视图·lakehouse·存算分离
颇有几分姿色28 分钟前
Spring Boot 实现多种来源的 Zip 多层目录打包下载(本地文件&HTTP混合)
java·spring boot·后端
Aaaa小嫒同学29 分钟前
mapreduce-理解map-reduce
大数据·mapreduce
百锦再31 分钟前
Android Studio中OpenCV应用详解:图像处理、颜色对比与OCR识别
android·java·图像处理·opencv·kotlin·app·android studio
-XWB-36 分钟前
【Java】打印运行环境中某个类引用的jar版本路径
java·开发语言
Brookty1 小时前
【Java学习】通配符?
java·学习
方二华1 小时前
Flink Table API与SQL技术详解
大数据·sql·flink
fhgfyrsg2 小时前
【无标题】
java
TracyCoder1232 小时前
ElasticSearch深入解析(十):字段膨胀(Mapping 爆炸)问题的解决思路
大数据·elasticsearch·jenkins