Vue项目中实现tab栏和步骤条的数据联动

也就是tab栏切换步骤条随之变化

<template>

  <div>

    <!-- 面包屑导航  -->

    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

      <el-breadcrumb-item>商品管理</el-breadcrumb-item>

      <el-breadcrumb-item>添加商品</el-breadcrumb-item>

    </el-breadcrumb>

    <!-- 卡片视图区 -->

    <el-card>

      <!-- 提示信息 -->

      <el-alert title="添加商品信息" type="info" center show-icon> </el-alert>

      <!-- 步骤条 -->

      <el-steps

        :space="200"

        :active="activeNum - 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="tabPosition"

        style="height: 200px;"

        :before-leave="beforeLeave"

      >

        <el-tab-pane label="基本信息">

          <el-form ref="form">

            <el-form-item label="商品名称">

              <el-input></el-input>

            </el-form-item>

          </el-form>

        </el-tab-pane>

        <el-tab-pane label="商品参数">商品参数</el-tab-pane>

        <el-tab-pane label="商品属性">商品属性</el-tab-pane>

        <el-tab-pane label="商品属性">商品图性</el-tab-pane>

        <el-tab-pane label="商品内容">商品内容</el-tab-pane>

      </el-tabs>

    </el-card>

  </div>

</template>

<script>

export default {

  data() {

    return {

      tabPosition: 'left',

      activeNum: 0

    }

  },

  methods: {

    beforeLeave(activeName, oldActiveName) {

      // activeName打印出来是分别是0，1,2....

      this.activeNum = activeName

    }

  }

}

</script>

<style lang="less" scoped></style>