Element UI 步骤条组件 HTML 代码示例 - 简单易懂的实现

<p>&quot;&quot;&quot;<template>\n  &lt;div class=&quot;step-bar&quot;&gt;\n    &lt;el-steps :active=&quot;activeStep&quot; align-center&gt;\n      &lt;el-step v-for=&quot;(step, index) in steps&quot; :key=&quot;index&quot; :title=&quot;step.title&quot;&gt;</el-step>\n    </el-steps>\n  </div>\n</template>\n\n<script>\n export default {\n  data() {\n    return {\n      activeStep: 0, // 当前激活的步骤\n      steps: [\n        { title: &quot;步骤一&quot; },\n        { title: &quot;步骤二&quot; },\n        { title: &quot;步骤三&quot; }\n      ]\n    };\n  }\n};\n</script>\n\n<style scoped>\n.step-bar {\n  margin: 20px;\n}\n</style>\n&quot;&quot;&quot;
在上述代码中，我们使用 Element UI 的<code>el-steps</code>组件来创建步骤条。<code>active</code>属性用于指定当前激活的步骤，<code>align-center</code>属性用于居中对齐步骤。使用<code>v-for</code>指令遍历<code>steps</code>数组来渲染每一个步骤，<code>el-step</code>组件的<code>title</code>属性用于显示步骤的标题。</p>
<p>你可以在<code>data</code>中定义<code>activeStep</code>来控制当前激活的步骤，<code>steps</code>数组用于定义所有的步骤。</p>
<p>最后，我们使用<code>scoped</code>属性将样式限定在组件的范围内，并设置了一个简单的外边距样式。你可以根据需要自定义样式。</p>