最近在用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
© 著作权归作者所有,转载或内容合作请联系作者
喜欢的朋友记得点赞、收藏、关注哦！！！