Vue - Tabs标签页 切换时，同步 Tabs标签页

效果图

代码实现

<template>
  <div>
    <!-- Steps 步骤条 -->
    <!-- activeIndex - 0   将字符串类型转为数字类型 -->
    <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>
    <!-- Tabs 标签页 -->
    <el-tabs v-model="activeIndex" tab-position="left" 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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "0"
    };
  }
};
</script>
<style scoped>
</style>