el-steps 标题在左侧

实现 el-steps 标题在左侧需要进行以下步骤：

1. 设置 Steps 组件的 direction 属性为 vertical，这样步骤条就会垂直排列。

2. 设置 Steps 组件的 align-center 属性为 false，这样每个步骤的内容就会左对齐。

3. 设置 Steps 组件中每个 Step 的 title-position 属性为 left，这样每个步骤的标题就会出现在左侧。

示例代码如下：

<el-steps :active="active" direction="vertical" :align-center="false">
  <el-step title="步骤 1" description="这是步骤 1 的描述" :icon="icon1" title-position="left"></el-step>
  <el-step title="步骤 2" description="这是步骤 2 的描述" :icon="icon2" title-position="left"></el-step>
  <el-step title="步骤 3" description="这是步骤 3 的描述" :icon="icon3" title-position="left"></el-step>
</el-steps>

其中，icon1、icon2 和 icon3 是自定义的步骤图标。

相关问题

el-steps 设置了align-center为什么还同时改变了el-steps的宽度

当你将 `align-center` 应用于 `el-steps` 组件时，它会将每个步骤居中对齐。但是，如果在 `el-steps` 组件的父级容器中设置了一个固定的宽度，那么 `el-steps` 组件的宽度也会受到这个父级容器的宽度限制。因此，即使你将 `el-steps` 中的步骤居中对齐，但容器的宽度限制会影响 `el-steps` 的宽度。如果你想要 `el-steps` 组件的宽度不受父级容器的限制，你可以将宽度设置为 `100%`。

el-form 和 el-steps

el-form 是 Element UI 中的一个组件，用于创建表单。它提供了一些常见的表单元素，如输入框、下拉框、单选框等，以及校验规则和表单提交等功能。使用 el-form 可以方便地构建复杂的表单页面，并进行数据验证和提交。

el-steps 也是 Element UI 中的一个组件，用于展示多个步骤的流程。它通常用于引导用户完成一个复杂的操作流程，每个步骤都有对应的标题和内容。用户可以按照指定的顺序逐步完成每个步骤，同时也可以根据实际情况进行跳过或返回上一步。el-steps 提供了多种样式和配置选项，使得开发者可以根据需要自定义步骤组件的外观和行为。