ElementUI habla sobre el atributo antes de salir del componente Tag para realizar una página de salto condicional

En el-tabsdonde cada uno <el-tab-pane>corresponde a un atributo de nombre, es este <el-tab-pane>número, como tenemos 0-4, para representar los cinco <el-tab-pane>, un clic <el-tab-pane>, el valor el-tabslímite v-model="activeIndex"cambiará automáticamente para corresponder <el-tab-pane>al namevalor de la propiedad.

el-tabsEn el :before-leave="beforeTabLeaveatributo de una función

Esta función acepta dos argumentos, el primero está activo, haga clic en el valor de la <el-tab-pane>etiqueta namede la propiedad, el segundo parámetro está activo antes del valor de la <el-tab-pane>etiqueta namede la propiedad, el efecto es el siguiente:

cómo <el-tab-pane>no se puede cambiar con el clic?
Solo necesitamos :before-leavedevolver falso en la función de devolución de llamada o devolver un objeto de promesa y rechazarlo para evitar que la página haga clic para saltar:

Ahora vamos a tener una función, es decir, si no selecciona una categoría de producto (debe ser una categoría de tercer nivel), no puede hacer clic para saltar a otras categorías <el-tab-pane>. Puede hacer esto:

ahora no seleccione una categoría, o solo seleccione una categoría de segundo nivel, no está permitido Saltar a otra <el-tab-pane>y mostrar un cuadro de diálogo de recordatorio
Efecto:

<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>