最近在用vue+iview框架做项目,在实际做项目中根据需求用到iview中的tabs标签页嵌套以及标签页增加删除功能。想着记录下来,以后可能会再用到。下面是页面。由于是公司的项目具体有些地方我会打码,不影响阅读!
tabs页面嵌套iview文档上写的很清楚。而且在网上也可以搜到相关的问题,下面是我写的代码。
tabs嵌套时需要给每一级做好标识,大家看看文档的API再对照代码就可以明白了。
下面是tabs标签页增加删除功能了,我刚开始的时候被删除功能给难住了。
我刚开始就是这样写的,可是在操作的时候,点击删除会连着删除两个,刚开始不知道怎么回事,后来经过定位分析,因为是这个删除功能会自带一个假删,只是页面上消失了,数组里的数据还是没删。
这是文档上的,他就是由v-if=true/false控制着的。
然后我再用splice删除一个,在页面上就是删除两个。实际数组就删除了一个。然后我又重新看了看文档,他有一个before-remove方法。我就在删除之前禁止他本身的删除。下面是我写的
这里最重要的是return Promise.reject();他是组织自删的。不过这里会报出一个错误
但是不会影响功能。我也就没管,各位有办法的话可以告诉我。
还有一个增加功能代码附上。