Vue3 el-tabs 切换记录选项卡,离开前提示

最近做了一个项目,tabs选项卡 需要在离开当前的选中的项时进行提示并且当取消时定位原位置。
看效果图 当我进行编辑时 触发编辑 但是没有进行保存即提示信息。取消后返回原tabs ,否则确认后进入下个tab。
在这里插入图片描述
在这里插入图片描述

上代码
在这里插入图片描述
tab 一般默认会有一个值,一把是第一个
然后记录需要两个事件
@tab-click=“editChangeInex” @before-leave=“leaveTab”
在这里插入图片描述
我这里是详情和编辑公用了同一个页面,所以进行了赋值判断 详情 和 编辑 操作。
因为当我拒绝离开时是默认回转到详情页面的。详情是不进行提示的。

/** tab切换栏: 当前选择条数 */
const currenItem = ref(0)
/** 是否 编辑记录 */
const isEdit = ref(false)/** 编辑按钮 权限判定 */
let changeBut = ref('查看')
const editBtn = () => {changeBut.value = '编辑'if (isProjectRun.value && isMyself.value) isEdit.value = true// 权限判断 提示条件if (!isMyself.value) isShowTipCard.value = trueif (!isProjectRun.value) isShowTipCard.value = true
}
let oldActiveName = currenItem.value
const editChangeInex = (val:any) =>{if(changeBut.value==='编辑'){ElMessageBox.confirm('您有未保存数据项, 是否确认离开? 离开后数据不做变更','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {//确定切换,切换到下一个 并关闭编辑状态转为详情查看currenItem.value = Number(val.index)oldActiveName = currenItem.valueisEdit.value = !isEdit.valuechangeBut.value='查看'}).catch(() => {//取消切换返回上一个console.log(oldActiveName, 'oldActiveName');currenItem.value = oldActiveName oldActiveName = currenItem.value})}else {currenItem.value = Number(val.index)oldActiveName = currenItem.value}
}
const leaveTab = (newValue:any, oldValue:any) =>{// console.log('切换前的Tab:', newValue, '切换后的Tab:', oldValue)oldActiveName = oldValue
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/400031.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

经典算法题总结:二叉树篇

二叉树解题的思维模式分两类: 是否可以通过遍历一遍二叉树得到答案?如果可以,用一个 traverse 函数配合外部变量来实现,这叫「遍历」的思维模式。是否可以定义一个递归函数,通过子问题(子树)的…

如何平衡冷数据(历史库)的成本与性能?| OceanBase应用实践

随着数据量的迅猛增长,企业和组织在数据库管理方面遭遇的挑战愈发凸显。数据库性能逐渐下滑、存储成本节节攀升,以及数据运维复杂性的增加,这些挑战使得DBA和开发者在数据管理上面临更大的压力。 为了应对这些挑战,对数据生命周期…

Jeecgboot3.6.3的vue3版本的一种flowable动态增加一个用户任务节点的方法(三)后端代码实现

因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。 这部分主要讲后端实现部分 1、增加一个AddTaskVo 类型,提供新增任务需要的数据结构 import io.swagger.annotations.ApiModel; import io.swagger.annotations.ApiModelProperty; import lombok.D…

C#使用Puppeteer

Puppeteer Puppeteer是一个Node.js库,它提供了高级API来通过DevTools协议(Chrome DevTools Protocol https://devtools.chrome.com)控制Chrome或Chromium。 Puppeteer默认情况下无头运行(headless)。 可以配置为运行完整的Chrome或Chromium,运行效果如…

spring02-springbean生命周期(实例化过程)

【README】 本文总结自《spring揭秘》,作者王福强,非常棒的一本书,墙裂推荐; spring容器根据配置元素组装可用系统分2个阶段,包括spring容器启动, springbean实例化阶段; 本文详细分析springbe…

单播---广播---组播

单播 单播(Unicast)是一种网络通信方式,其中数据包被发送到特定的网络接口。与广播(Broadcast)不同,单播只将数据包发送到目标地址指定的单个接收者。 单播的工作原理: 源地址:发…

DATAX自定义KafkaWriter

因为datax目前不支持写入数据到kafka中,因此本文主要介绍如何基于DataX自定义KafkaWriter,用来同步数据到kafka中。本文偏向实战,datax插件开发理论宝典请参考官方文档: https://github.com/alibaba/DataX/blob/master/dataxPlug…

240810-Gradio通过HTML组件打开本地文件+防止网页跳转到about:blank

A. 最终效果 B. 可通过鼠标点击打开文件,但会跳转到about:blank import gradio as gr import subprocessdef open_pptx():pptx_path /Users/liuguokai/Downloads/240528-工业大模型1.pptxtry:subprocess.Popen([open, pptx_path])return "PPTX file opened s…

【npm】如何将开发的vite插件发布到npm

前言 简单说下 npm 是什么: npm 是一个 node 模块管理工具,也是全球最大的共享源。 npm 工具与 nodejs 配套发布,便利开发人员共享代码。npm 主要包括 npm 官方网站、CLI(控制台命令行工具)、和 registry(…

Python酷库之旅-第三方库Pandas(079)

目录 一、用法精讲 326、pandas.Series.str.normalize方法 326-1、语法 326-2、参数 326-3、功能 326-4、返回值 326-5、说明 326-6、用法 326-6-1、数据准备 326-6-2、代码示例 326-6-3、结果输出 327、pandas.Series.str.pad方法 327-1、语法 327-2、参数 327…

升级软文发稿开源系统源码论文期刊一键发布

升级软文发稿运营管理源码—论文期刊一键发布 软文发稿系统源码(软文发布系统)在基于旧版本的媒介软文发布平台项目改造升级了新的功能模块简称(3.0版)本系统还是基于开源的PHPMYSQLlayui(前端界面)代码进行…

Vue3使用ECharts的曲线条形堆叠混合图

先上效果图 图表容器 <div id"leftChart" style"height: 28vh"></div> <div id"rightChart" style"height: 28vh"></div> 监听resize视图窗口大小&#xff0c;可以让chart图表自适应大小 const leftChart …

wireshark使用介绍及案例分享

一、wireshark介绍 1、定义 wireshark是非常流行的网络封包分析软件,简称小鲨鱼,功能十分强大。可以截取各种网络封包,显示网络封包的详细信息。对应的,linux下的抓包工具是 tcpdump。 1.1、网络基础 参考TCP/IP五层模型,帧结构如下: 帧字段 帧字段含义 Frame 物理层的…

统计学第3天

P值 P值是原假设&#xff08;零假设&#xff09;H0为真的前提下&#xff0c;观察到的异常数据出现的概率。 如果P值很小&#xff0c;意味着原假设为真的情况下&#xff0c;取出能拒绝原假设数据的概率极低&#xff0c;此时取出了一个数据和原假设不符&#xff0c;说明了该组数…

ICMAN水位接近式检测方案(非接触式)

ICMAN水位液位接近式检测方案&#xff08;非接触式&#xff09; 我们的很多家用电器都会需要&#xff1a;液位检测 缺水&溢水提醒保护、高低液位提醒 液位传感器 像健康家电——烧水煮茶熬养生汤的烧水壶、豆浆机、养生壶等需要缺水保护和防溢液提醒&#xff1b; 像清洁…

DAMA学习笔记(十五)-数据管理组织与角色期望

1.引言 随着数据领域的快速发展&#xff0c;组织需要改进管理和治理数据的方式。当前&#xff0c;大多数组织正面临着越来越多的数据。这些数据格式多样、数量 庞大&#xff0c;并来源于不同的渠道。由于数据数量和种类的增加&#xff0c;加剧了数据 管理的复杂性。与此同时&am…

科研绘图系列:R语言多分组箱线图(grouped boxplot)

介绍 分组箱线图(Grouped Boxplot)是一种用于展示不同组别数据分布情况的统计图表。它将箱线图(Boxplot)按照不同的类别或组别进行分组,使得可以同时比较多个组别的数据特征。 箱线图本身是一种标准化的显示数据分布的方法,它能够展示数据的中位数、四分位数以及异常值…

【upload]-ini-[SUCTF 2019]CheckIn-笔记

上传图片木马文件后看到&#xff0c;检查的文件内容&#xff0c;包含<? 一句话木马提示 检查的文件格式 用如下图片木马&#xff0c;加上GIF89a绕过图片和<?检查 GIF89a <script languagephp>eval($_POST[cmd])</script> .user.ini实际上就是一个可以由用…

RAG与LLM原理及实践(11)--- Milvus hybrid search 源码分析及思想

目录 背景 hybrid search 源码分析 WeightedRanker 源码 hybrid search 核心 参数详解 基本入参 扩展入参 aysnc方式代码调用案例 说明 源码逻辑 prepare 调用过程 stub 调用结果 stub 调用过程 blocking 与 async 调用方式 深入内部core weightedRanker 的ch…

UCOSIII事件标志组详解

UCOSIII中的事件标志组是一种用于任务同步和事件管理的机制&#xff0c;它允许任务和中断服务例程&#xff08;ISR&#xff09;发布事件标志&#xff0c;并允许任务等待这些事件标志的发生。以下是对UCOSIII事件标志组的详细介绍&#xff1a; 1. 定义与创建 定义&#xff1a;…