ElementUI fala sobre o atributo before-leave do componente Tag para realizar uma página de salto condicional

Em um el-tabsonde cada um <el-tab-pane>corresponde a um atributo de nome, este <el-tab-pane>número, como temos 0-4, para representar os cinco <el-tab-pane>, um clique <el-tab-pane>, o valor el-tabsvinculado v-model="activeIndex"mudará automaticamente para corresponder <el-tab-pane>ao namevalor clicado da propriedade

el-tabsNo :before-leave="beforeTabLeaveatributo de uma função

Esta função aceita dois argumentos, o primeiro está ativo clique no valor do <el-tab-pane>tag nameda propriedade, o segundo parâmetro está ativo antes do valor do <el-tab-pane>tag nameda propriedade, o efeito é o seguinte:

como <el-tab-pane>não pode trocá-lo com o clique?
Precisamos apenas :before-leaveretornar false na função de retorno de chamada ou retornar um objeto de promessa e rejeitar para evitar que a página clique para pular:

Agora vamos ter uma função, ou seja, se você não selecionar uma categoria de produto (deve ser uma categoria de terceiro nível), você não tem permissão para clicar para pular para outras categorias <el-tab-pane>. Você pode fazer isso:

agora não selecione uma categoria, ou selecione apenas uma categoria de segundo nível, não é permitido Saltar para outra <el-tab-pane>e abrir uma caixa de diálogo de lembrete
Efeito:

<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" label-position="top">
        <el-tabs v-model="activeIndex" :tab-position="'left'" :before-leave="beforeTabLeave">
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="addForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="addForm.goods_price" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="addForm.goods_weight" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="addForm.goods_number" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <el-cascader
                expand-trigger="hover"
                :options="cateList"
                :props="cateProps"
                v-model="addForm.selectedCateKeys"
                @change="handleChange">
              </el-cascader>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="1">商品参数</el-tab-pane>
          <el-tab-pane label="商品属性" name="2">商品属性</el-tab-pane>
          <el-tab-pane label="商品图片" name="3">商品图片</el-tab-pane>
          <el-tab-pane label="商品内容" name="4">商品内容</el-tab-pane>
        </el-tabs>
      </el-form>