效果图
代码实现
<template>
<div>
<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="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>