ElementUI talks about the before-leave attribute of Tag component to realize conditional jump page

In a el-tabswhere each <el-tab-pane>corresponds to a name attribute, is this <el-tab-pane>number, such as we have 0-4, to represent the five <el-tab-pane>, a click <el-tab-pane>, el-tabsbound v-model="activeIndex"value will automatically change to correspond clicked <el-tab-pane>the nameproperty value

el-tabsIn the :before-leave="beforeTabLeaveattribute of a function

This function accepts two arguments, the first one is active click on the <el-tab-pane>tag namevalue of the property, the second parameter is active before the <el-tab-pane>tag namevalue of the property, the effect is as follows:

how <el-tab-pane>can not switch it with the click ?
We only need to :before-leavereturn false in the callback function or return a promise object and reject to prevent the page from clicking to jump:

We are now going to have a function, that is, if you don’t select a product category (must be a third-level category), you are not allowed to click to jump to other categories <el-tab-pane>. You can do this:

now do not select a category, or only select a second-level category. Jump to another <el-tab-pane>and pop up a reminder dialog box
Effect:

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