vue结合Element UI如何实现Steps步骤条组件和Tabs标签页组件联动

一、Element UI中Steps和Tabs组件联动

1. 引入Steps步骤条组件，space属性是每个step 的间距，不填写将自适应间距，支持百分比，我们可以设置一个值，比如200，这样每一个step步骤会保持一定的距离。finish-status属性是设置结束步骤的状态，可以设置为success，成功状态。align-center 属性是让步骤条居中对齐。active是设置当前激活步骤，是number类型的值。由于每一个激活的步骤是动态变化的，可以设置变量，activeIndex，进行绑定，代码如下：

        <!-- 步骤条区域 -->
        <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
            <el-step title="完成"></el-step>
        </el-steps>

2. 在data中定义activeIndex的值，默认是 '0'，是一个字符串的值，而active是接收的数值类型的值，所以在active中，设置 activeIndex - 0 就可以将字符串转换为数值类型的值，代码如下：

data() {
    return {
      activeIndex: '0'
    }
 }

3. 引入Tabs 标签页组件，tab-position 属性是选项卡所在位置，是一个String类型的值，可以设置为 'left'，这样就可以左对齐了。 v-model 属性是绑定值，选中选项卡的 name，是一个String类型的值，我们可以绑定data中的activeIndex。style是设置样式的属性，可以设置一下高度为200px。在每一个el-tab-pane中，label 是选项卡标题，可以展示选项卡的内容。name属性是与选项卡 activeName 对应的标识符，表示选项卡别名，是一个String类型，默认值为该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'。所以我们可以为每一个el-tab-pane去指定name的值，'0','1','2'等等。这样就可以实现Steps步骤条组件和Tabs标签页组件联动，代码如下：

        <!-- tab栏区域 -->
        <el-tabs :tab-position="'left'" v-model="activeIndex" style="height: 200px;">
            <el-tab-pane label="基本信息" name='0'>基本信息</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>

4. 在第一个tab的内容没有写完的时候，是不能够切换到第二个tab，阻止标签页的切换，我们可以使用Tabs中的before-leave。before-leave是切换标签之前的钩子，若返回 false 或者返回Promise且被 reject，则阻止切换，Function(activeName, oldActiveName)，传入两个参数。第一个参数是activeName，即将进入的标签页，第二个参数是oldActiveName，即将离开的标签页。我们可以通过即将离开的标签页el-tab-pane的name的值为'0'，并且表单所获取的数据长度去判断，代码如下：

  beforeTabLeave (activeName, oldActiveName) {
      if (oldActiveName === '0' && this.addForm.goods_cat.length !== 3) {
        this.$message.error('请先选择商品分类！')
        return false
      }
    },

二、Element UI中Steps和Tabs组件联动的实现

1. Element UI中Steps和Tabs组件联动的实现，完整代码如下：

<template>
    <div>
        <!-- 卡片视图 -->
        <el-card>
            <!-- 提示区域 -->
            <el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert>

            <!-- 步骤条区域 -->
            <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>

            <!-- tab栏区域 -->
            <el-tabs :tab-position="'left'" v-model="activeIndex" style="height: 200px;">
                <el-tab-pane label="基本信息" name='0'>基本信息</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-card>
    </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '0'
    }
  }
}
</script>

<style lang="less" scoped>

</style>

2.Element UI中Steps和Tabs组件联动的实现，实现效果如下：