element tab组件,是否阻止切换

news/2025/2/12 2:45:46/

需求:

在tab切换之前判断当前页面是否有选择商品,如果有则在切换前提示用户保存

代码:

在这里插入图片描述

<el-tabs v-model="tabActive" type="card" closable :before-leave="tabBefore" @tab-remove="tabRemove">
data() {return {tabBefore: (activeName, oldActiveName) => {if (oldActiveName == '产品商城' && this.productNum > 0) {return this.$confirm('系统不会保留您所选商品, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {}).catch(() => {throw new Error('取消成功!')});}},}

在这里插入图片描述


http://www.ppmy.cn/news/1202059.html

相关文章

EasyExcel 导出冻结指定行

导出的实体类 package org.jeecg.modules.eis.test;import com.alibaba.excel.annotation.ExcelProperty; import com.alibaba.excel.annotation.write.style.*; import lombok.Getter; import lombok.Setter; import org.apache.poi.ss.usermodel.HorizontalAlignment;import…

APISpace 手机号码归属地API接口案例代码

1.手机号码归属地API产品介绍 APISpace 的 手机号码归属地API&#xff0c;提供全国移动、联通、电信等手机号码归属地查询&#xff0c;上亿条数据囊括最新的170、166、147等号段&#xff0c;更新及时、准确度高。 2.手机号码归属地API详解 2.1 接口请求 请求方式&#xff1a…

vue sass-loader,webpack安装卸载操作命令

检查 node-sass 的可用版本&#xff1a;运行下面的命令&#xff0c;查看 node-sass 的可用版本列表。 查看 npm view node-sass versions卸载 npm uninstall node-sass安装指定版本 npm install node-sass4.14.1安装最新版本 npm install sass-loaderlatest如果没有指定特定…

阿里云中的云服务器的ubuntu中的vim没有显示行号

没有行号&#xff1a; 在终端输入命令&#xff1a; vim ~/.vimrc set nu

同样是BGA扇出,为什么别人设计出来的性能就是比你好!

高速先生成员--黄刚 高速先生经常会说一句话&#xff0c;那就是对于信号质量的优化是无极限的&#xff0c;这里说的优化&#xff0c;其实说的就是PCB的设计优化。首先肯定的是&#xff0c;不同的设计工程师去做同样一块PCB板的设计&#xff0c;做出来的肯定都不会完全一样。那不…

AspectJX - Android开发平台的AOP框架

官网 GitHub - HujiangTechnology/gradle_plugin_android_aspectjx: A Android gradle plugin that effects AspectJ on Android project and can hook methods in Kotlin, aar and jar file. 项目简介 一个基于AspectJ并在此基础上扩展出来可应用于Android开发平台的AOP框架…

基于SSM的办公自动化管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

【uniapp+vue3/vue2】ksp-cropper高性能图片裁剪工具,详解

效果图&#xff1a; 1、ksp-cropper是hbuilder插件市场中的一款插件&#xff0c;兼容vue2和vue3 ksp-cropper插件安装地址&#xff0c;直接点击跳转 2、插件用法相对简单 &#xff08;1&#xff09;只要url有值就会显示插件&#xff0c;为空就会隐藏插件 &#xff08;2&#…