image.png
image.png
tabs组件代码
<el-tabs v-model="activeTab" type="card" :before-leave="beforeLeave">
<el-tab-pane label="用户信息" name="basicInfo">
用户信息表单
</el-tab-pane>
<el-tab-pane v-if="code" label="用户角色" name="userRole">
用户角色列表
</el-tab-pane>
</el-tabs>
方法（二选一）
// 方法一使用promise的reject()
beforeLeave(item) {
var p = new Promise((resolve, reject) => {
this.$confirm('离开将不保存本页修改', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 你可以在这儿做些操作
resolve()
}).catch(err => {
// 你可以在这儿做些操作
reject(err)
})
})
return p
},
// 方法二使用了throw new Error()阻断js
beforeLeave(item) {
return this.$confirm('离开将不保存本页修改', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
}).catch(() => {
throw new Error('取消成功！')
})
},
PS
都会在控制台有一个报错提示的小瑕疵，我也没想到更好的办法，哪位大神如果有，务必留言，感激不尽。
