Element Plus el-tabs的@before-leave回调未触发问题求助

问题原因 #

最新版Element Plus已将el-tabs的before-leave事件重命名为before-tab-leave，原事件名已被废弃移除，因此你绑定的@before-leave不会触发任何回调。

修复步骤 #

1. 修改模板事件绑定
   将pug模板中的@before-leave="handleBeforeLeave"替换为@before-tab-leave="handleBeforeLeave"：

<template lang="pug">
el-tabs.mt-5(v-model="activeName" class="demo-tabs" @tab-click="handleTabChange" @before-tab-leave="handleBeforeLeave")
      el-tab-pane(:label="$t('privacyPolicy')" name="privacyPolicy" )
      el-tab-pane(:label="$t('termsAndConditions')" name="termsAndConditions" )
      el-tab-pane(:label="$t('paymentPolicy')" name="paymentPolicy"  )
</template>

2. 完善回调逻辑（实现需求）
   原回调仅返回false阻止切换，可补充表单未保存的判断逻辑，实现需求中的提示功能：

<script setup>
import type { TabPaneName } from 'element-plus'

// 示例：用ref存储表单初始值与当前值
const privacyForm = ref({ /* 表单初始数据 */ })
const termsForm = ref({ /* 表单初始数据 */ })
const paymentForm = ref({ /* 表单初始数据 */ })
const initialFormStates = {
  privacyPolicy: JSON.parse(JSON.stringify(privacyForm.value)),
  termsAndConditions: JSON.parse(JSON.stringify(termsForm.value)),
  paymentPolicy: JSON.parse(JSON.stringify(paymentForm.value))
}

const handleBeforeLeave = (oldActiveName: TabPaneName, newActiveName: TabPaneName): boolean => {
  // 判断切换前的标签页表单是否有未保存修改
  let hasUnsavedChanges = false
  switch(oldActiveName) {
    case 'privacyPolicy':
      hasUnsavedChanges = JSON.stringify(privacyForm.value) !== JSON.stringify(initialFormStates.privacyPolicy)
      break
    case 'termsAndConditions':
      hasUnsavedChanges = JSON.stringify(termsForm.value) !== JSON.stringify(initialFormStates.termsAndConditions)
      break
    case 'paymentPolicy':
      hasUnsavedChanges = JSON.stringify(paymentForm.value) !== JSON.stringify(initialFormStates.paymentPolicy)
      break
  }

  if (hasUnsavedChanges) {
    return confirm('您有未保存的更改，切换标签页将丢失这些内容，确定要切换吗？')
  }
  return true
}
</script>

注意事项 #

• 表单对比逻辑为基础示例，实际项目建议使用更严谨的深对比方法（如lodash的isEqual），避免JSON.stringify无法处理特殊类型的局限性。
• 若需异步确认（如接口验证），可让回调返回Promise，reject时将阻止标签切换。

内容的提问来源于stack exchange，提问作者Adham Saleh