element tab组件，是否阻止切换

最新推荐文章于 2024-12-30 11:54:41 发布

了以李_

最新推荐文章于 2024-12-30 11:54:41 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript vue Element UI 文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_47466275/article/details/134260456

JavaScript 同时被 3 个专栏收录

24 篇文章

订阅专栏

vue

19 篇文章

订阅专栏

Element UI

6 篇文章

订阅专栏

本文介绍了如何在使用Vue.js的el-tabs组件时，检测到用户在切换到其他选项卡前有商品选择，从而弹出确认对话框提示用户是否保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

在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('取消成功！')
	            });
	        }
	    },
	}