当前位置: 首页 > 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


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

http://www.dtcms.com/a/165392.html

相关文章:

  • 分布式数字身份:迈向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方法解读
  • (即插即用模块-特征处理部分) 四十五、(2024 TGRS) SFF 浅层特征融合模块
  • WebRtc09:网络基础P2P/STUN/TURN/ICE
  • [实战] Petalinux驱动开发以及代码框架解读
  • IBM WebSphere Application Server 7.0/8.5.5证书过期问题处理
  • firecrawl的docker安装和api调用
  • 【python】-基础语法3
  • flutter开发音乐APP(简单的音乐播放demo)
  • Android Compose 无网络状态处理全指南:从基础到高级实践
  • 家庭服务器IPV6搭建无限邮箱系统指南
  • 米壳AI:跨境电商图片翻译的“隐形革命”:当AI技术遇上全球化生意