el-steps 竖向

如果您想要将 `el-steps` 组件显示为竖向的步骤条，可以设置 `direction` 属性为 `"vertical"`。同时，您可以通过样式来调整步骤条的宽度和高度，以及步骤内容的对齐方式。

以下是示例代码：

<template>
  <el-steps :active="activeStep" space="100px" direction="vertical" style="height: 300px;">
    <el-step v-for="(item, index) in steps" :key="index">
      {{ item.content }}
    </el-step>
  </el-steps>
</template>

<script>
export default {
  data() {
    return {
      activeStep: 0,
      steps: [
        {
          content: '这里是步骤 1 的内容',
        },
        {
          content: '这里是步骤 2 的内容',
        },
        {
          content: '这里是步骤 3 的内容',
        },
      ],
    };
  },
};
</script>

<style>
.el-step {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

在上面的代码中，我们将 `el-steps` 组件的 `direction` 属性设置为 `"vertical"`，并使用 `style` 属性来设置步骤条的高度为 `300px`。在样式中，我们使用了 `display: flex` 和 `align-items: center` 来让步骤内容垂直居中，使用了 `justify-content: center` 来水平居中步骤内容。同时，我们也设置了每个步骤的高度为 `100px`，可以根据实际情况进行调整。