ElementUI Steps_elementui steps 换行
在使用ElementUI的Steps组件时，可能会遇到需要换行显示各个步骤的情况。一个简单的解决方案是通过自定义样式或者调整Steps组件的布局属性来实现换行。
一、使用CSS样式控制换行
最直接的方法是利用CSS中的flex-wrap: wrap;属性来让Steps组件内的步骤项换行显示。具体操作如下：
-
HTML结构
html
<el-steps :active="active" finish-status="success" style="flex-wrap: wrap;">
<el-step title="步骤1"></el-step>
<el-step title="步骤2"></el-step>
<el-step title="步骤3"></el-step>
<el-step title="步骤4"></el-step>
<el-step title="步骤5"></el-step>
</el-steps>
这里我们给el-steps添加了内联样式style="flex-wrap: wrap;"，它会使得当一行放不下所有步骤时自动换行。 -
设置每行的步骤数量（可选）
如果想要更精确地控制每行显示多少个步骤，可以通过设置每个步骤项的宽度来实现：
css
.el-step {
flex: 0 0 30%; /* 这里表示每个步骤占30%的宽度 */
margin-right: 5%;
}
/* 最后一个元素不需要右边距 */
.el-step:last-child {
margin-right: 0;
}
二、使用slot插槽自定义内容并换行
另一种思路是利用ElementUI的slot插槽特性，将Steps组件的内容进行重新布局以达到换行的效果。
```html
同时为`.custom-step`添加样式：
.custom-step {
width: 100%;
display: block;
margin-bottom: 10px;
}
```
这种方式是将每个步骤单独放在一个容器中，然后通过循环渲染的方式让它们依次排列，并且自然换行。
以上两种方法都可以很好地解决ElementUI Steps组件换行的问题，在实际项目中可以根据需求选择合适的方式。种方法更加简洁，适用于简单的换行场景；第二种方法灵活性更高，可以对每个步骤进行更复杂的定制。
