el-steps中每个步骤放置el-tag
时间: 2024-06-20 13:04:21 浏览: 148
el-steps 是 Element UI 中的一个组件,用于展示多个步骤中的进度和状态。要在 el-steps 中放置 el-tag,可以按照以下步骤进行操作:
1. 在 el-steps 组件中添加需要展示的步骤,每个步骤可以添加一个 title 属性来显示名称。
2. 在每个步骤中添加 el-step 对象,并设置其 status 属性来表示该步骤的状态(如:finish、process、wait 等)。
3. 在每个 el-step 对象中添加一个 slot 标签,并在其中添加 el-tag 标签,用于展示该步骤的具体状态。
下面是一个示例代码,其中包含了三个步骤,每个步骤都包含了一个 el-tag 来表示其状态:
```
<el-steps :active="1">
<el-step title="Step 1" status="finish">
<template slot="description">
<el-tag type="success">Finished</el-tag>
</template>
</el-step>
<el-step title="Step 2" status="process">
<template slot="description">
<el-tag type="warning">In Progress</el-tag>
</template>
</el-step>
<el-step title="Step 3" status="wait">
<template slot="description">
<el-tag type="info">Pending</el-tag>
</template>
</el-step>
</el-steps>
```
阅读全文