当前位置: 首页 > news >正文

关于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


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

相关文章:

  • 分布式数字身份:迈向Web3.0世界的通行证 | 北京行活动预告
  • 全球合规风暴升级:韩国原产地稽查揭示跨境电商生死线
  • electron+vite+vue3 快速入门教程
  • 基于DeepSeek与HTML的可视化图表创新研究
  • 蛋白质数据库InterPro介绍
  • 《跨端开发变革者:解码阿里Ant Container Engine的底层逻辑》
  • ESP32开发-作为TCP客户端发送数据到网络调试助手
  • Stack--Queue 栈和队列
  • 抢先体验 | Qwen3 模型发布:基于 ZStack AIOS 平台极速体验
  • AI数字人:人类身份与意识的终极思考(10/10)
  • HTML from表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)
  • SpringBoot集成Druid启动报错testWhileIdle is true, validationQuery not set
  • 如何用fiddler进行弱网测试(工作常用篇)
  • Qt官方案例知识点总结(拖放操作——Drag And Drop Robot )
  • 【Linux 网络】网络工具ifconfig和iproute/iproute2工具详解
  • java网络原理5
  • Linux 基础IO(上)--文件与文件描述符fd
  • python将字符串转成二进制数组
  • JVM快速入门
  • scGPT方法解读
  • 金砖国家外长会晤落幕,外交部:发出了反对单边霸凌行径的“金砖声音”
  • 屠呦呦当选美国科学院外籍院士
  • 零食连锁鸣鸣很忙递表港交所:去年营收393亿元,门店超1.4万家,净利润率2.1%
  • 解放日报:中国大模型企业的发展机遇已经到来
  • 证据公布!菲律宾6人非法登上铁线礁活动
  • 邮储银行一季度净赚超252亿降逾2%,营收微降