写一个element UI风格的步骤条组件代码

以下是一个基于 Element UI 风格的步骤条组件的示例代码：

<template>
  <div class="step-bar">
    <el-steps :active="activeStep" align-center>
      <el-step v-for="(step, index) in steps" :key="index" :title="step.title" :description="step.description"></el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeStep: 0,
      steps: [
        { title: 'Step 1', description: 'Description 1' },
        { title: 'Step 2', description: 'Description 2' },
        { title: 'Step 3', description: 'Description 3' },
      ]
    };
  },
};
</script>

<style scoped>
.step-bar {
  margin-top: 20px;
}
</style>

上述代码中，我们使用了 Element UI 的 el-steps 组件和 el-step 组件来实现步骤条效果。el-steps 组件的 :active 属性用于指定当前激活的步骤，我们使用 activeStep 变量来控制当前激活的步骤。el-step 组件的 v-for 指令用于循环渲染每个步骤，我们使用 steps 数组来存储每个步骤的标题和描述信息。

通过以上代码，你可以在你的 Vue.js 项目中使用这个步骤条组件，并根据需要修改步骤的标题、描述和激活的步骤