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

关于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.xdnf.cn/news/3174.html

相关文章:

  • 如何在uni-app中自定义输入框placeholder的样式
  • 2025年“深圳杯”数学建模挑战赛D题-法医物证多人身份鉴定问题
  • TCP和UDP的数据传输+区别
  • JavaScript的3D库有哪些?
  • 第六章 QT基础:9、Qt中数据库的操作
  • 自主采集高质量三维重建数据集指南:面向3DGS与NeRF的图像与视频拍摄技巧【2025最新版!!】
  • 『深夜_MySQL』详解数据库 探索数据库是如何存储的
  • 泰迪杯特等奖案例学习资料:基于多模态融合与边缘计算的智能温室环境调控系统
  • 负载均衡技术全景指南:架构、算法与发展趋势
  • 论文笔记(八十二)Transformers without Normalization
  • 高质量水火焰无损音效包
  • ​​Steam安装下载及新手注册
  • Best Video下载器——全能高清无水印视频下载工具
  • .NET Core 数据库ORM框架用法简述
  • 论文阅读 2024 arxiv Comprehensive Assessment of Jailbreak Attacks Against LLMs
  • HTML5好看的水果蔬菜在线商城网站源码系列模板8
  • 股指期货贴水对对冲的影响大吗?
  • centos升级glibc
  • k8s术语之Deployment
  • oceanbase设置密码
  • AI驱动视频批量智能混剪软件生产技术实践
  • 归并排序算法
  • 【单例模式】简介
  • 力扣-数组-189轮转数组
  • Kafka-可视化工具-Offset Explorer
  • Android Framework框架与启动过程初识一
  • 三个概念:DataBinding,Dependency Property 与DataTemplate
  • C#静态类与单例模式深度解析(七):从原理到工业级应用实践
  • iview 如何设置sider宽度
  • 论文阅读:2024 arxiv Jailbreaking Black Box Large Language Models in Twenty Queries