Vue-“Steps步骤条”与“tabs标签页”同步

向右看齐 2021-07-25 17:25 815阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]

<template>
      <div>
        <el-card>
          
          <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>
          
          <el-tabs v-model="activeIndex" :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 {
      data() {
        return {
          //步骤条的index
          activeIndex: '0',
          //tabs栏的位置
          tabPosition: 'left'
        }
      }
    }
    </script>
    <style scoped>
    </style>

***效果图如下所示：***  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/b03be32bec76422bb21b2fb7aa571035.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]: /images/20210725/86fabb8820614d76ab72037a6398482c.png