el-tabs 标签页判断拦截是否阻止tab切换，before-leave

最新推荐文章于 2024-01-18 17:42:14 发布

春晓_春眠花落

最新推荐文章于 2024-01-18 17:42:14 发布

阅读量3.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： element 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_49668076/article/details/126302387

element 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何在Element UI的Tab组件中实现切换前的逻辑验证，包括使用before-leave钩子进行条件判断及表单校验的方法。特别强调了如何利用async/await确保表单验证的准确性。

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

在这里插入图片描述
tab切换前，如果有逻辑要处理，不满足条件不允许切，就用before-leave

  <el-tabs type="border-card" :before-leave="confirmLeave">

如果需要表单校验，要用async和await搭配使用，不然校验触发的不及时
如果return false还是切换了，就使用return reject()

  // tab切换前判断
    async confirmLeave(active) {
      if (active === '1') {
        await this.$refs.annualAssetDetail.$refs.costForm.validate(valid => {
          let arr = this.$refs.annualAssetDetail.costForm.tableData
          if (valid) {
            if (arr.length) {
              arr.forEach(item => {
                if (item.clearId == 0) item.id = ''
              })
            
              return true
            } else {
              this.$message.warning('请先填写明细数据！')
              return reject()
            }
          } else {
      
            for (var i = 0; i < arr.length; i++) {
              if (!arr[i].Code) {
                this.$message.warning(`明细数据第${i + 1}行的xx分类未填写！`)
                break
              } else if (!arr[i].remark) {
                this.$message.warning(`明细数据第${i + 1}行的xx说明未填写！`)
                break
              }  else {
                  this.$message.warning(`明细数据第${i + 1}行的配置数量未填写！`)
                }
                break
              } 
            }
            this.formItemVerify(this.$refs.annualAssetDetail.$refs.costForm)
            return reject()
          }
        })
      } else {
       this.$refs.annualAssetDetail.costForm.tableDat=[]
      }
    },