vue2 v-for el-steps

Vue 2 中的 `v-for` 是用于数据绑定的一个指令，它允许你在 HTML 模板中遍历数组或者对象的数据。当配合 `el-steps` 组件使用时，你可以创建一个分步导航的步骤条，每个步骤通常代表一个任务或步骤状态。

`<el-steps>` 是 Element UI 提供的一个组件，专门用于显示一系列有顺序的步骤。下面是一个基本的 `v-for` 遍历 `el-steps` 的例子：

<template>
  <el-steps :active="stepIndex" v-for="(step, index) in stepsList">
    <template #default="{ step }">
      <el-step :title="step.title" :status="step.status"></el-step>
    </template>
  </el-steps>
</template>

<script>
export default {
  data() {
    return {
      stepIndex: 0,
      stepsList: [
        { title: '步骤一', status: 'process' },
        { title: '步骤二', status: 'finish' },
        { title: '步骤三', status: 'error' }
      ]
    };
  }
};
</script>

在这个例子中，`stepsList` 是一个包含步骤对象的数组，`v-for` 将其元素一一映射到 `el-step` 元素上，`active` 属性控制当前激活的步骤，`step.title` 和 `step.status` 分别引用了步骤的标题和状态属性。