Element-Ui组件（三十七）Steps 步骤条

Element-Ui组件（三十七）Steps 步骤条

本文来源于Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component/steps

基础用法

普通步骤条

<el-steps :active="active" finish-status="success">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>

带图标的步骤条

<el-steps :active="1">
  <el-step title="步骤 1" icon="el-icon-edit">el-step>
  <el-step title="步骤 2" icon="el-icon-upload">el-step>
  <el-step title="步骤 3" icon="el-icon-picture">el-step>
el-steps>

Steps Attributes：

参数	类型	说明	可选值	默认值
space	每个 step 的间距，不填写将自适应间距。支持百分比。	number / string	—	—
direction	显示方向	string	vertical/horizontal	horizontal
active	设置当前激活步骤	number	—	0
process-status	设置当前步骤的状态	string	wait / process / finish / error / success	process
finish-status	设置结束步骤的状态	string	wait / process / finish / error / success	finish
align-center	进行居中对齐	boolean	-	false
simple	是否应用简洁风格	boolean	-	false

Step Attributes

参数	说明	类型	可选值	默认值
title	标题	string	—	—
description	描述性文字	string	—	—
icon	图标	string	传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入	—
status	设置当前步骤的状态，不设置则根据 steps 确定状态	string	wait / process / finish / error / success	-

Step Slot

name	说明
icon	图标
title	标题
description	描述性文字