使用element-ui实现步骤条与tab标签页的连动

使用element-ui实现步骤条与tab标签页的连动

注意 el-tabs 中的 v-model 会自动关联 el-tab-pane 中的 name 值

通过 v-model 的变量与el-steps中的active值关联实现联动

<template>
  <div>
      <!-- 步骤条 -->
      <el-steps
        align-center
        :active="active * 1"
        show-icon
        finish-status="success"
      >
        <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
        v-model="active"
        :tab-position="tabPosition"
        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 {
  name: "GoodsAdd",
  data() {
    return {
      tabPosition: "left",
      active: "0"
    };
  },
  created() {},
  methods: {}
};