1. 拦截Element-UI中el-tabs组件的切换效果

需求:在切换tabs时,如果当前页面内容没有保存,则拦截切换并提示必填校验信息

先看下效果,点击新增,没有填写项目信息直接切换是会被阻止跳转
在点击下修改,内容是已经存在的在点击 年度计划,则可以跳转tabs标签页

el-tabs 判断拦截阻止切换标签
2. element el-tabs before-leave 方法进行拦截

el-tabs 判断拦截阻止切换标签
el-tabs 判断拦截阻止切换标签
el-tabs 判断拦截阻止切换标签
3. 坑点

  • 有时候必填完后返回 true 或者false 这个方法拦截不到,如 vaild ? true : false 所以建议使用 promise 的resolve()reject()

相关文章:

  • 2021-12-05
  • 2021-08-29
  • 2021-08-28
  • 2022-03-04
  • 2022-12-23
  • 2022-12-23
  • 2021-12-12
  • 2021-06-03
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-28
  • 2022-12-23
  • 2021-09-23
相关资源
相似解决方案