element组件的使用之步骤条

1.实现效果：

2.template代码

遍历数组

• active：指定哪一个状态是完成状态

• finish-status：完成状态wait / process / finish / error / success

• description：文字描述信息

• slot="icon"：自定义插槽图标（为空则不显示图标）

<el-steps direction="vertical"

:active="active"

finish-status="success">

<el-step v-for="(item,index) in form.list"

:key="index"

:description="`${item.time} ${item.desc}`">

<i slot="icon"></i>

</el-step>

</el-steps>

3.css样式

• 设置头部

::v-deep .el-step__head {

margin-top: -1.5px;

}

• 设置内容

::v-deep .el-step__main {

padding: 15px;

margin-left: -18px;

}

::v-deep .el-step__title {

display: none;

}

::v-deep .el-step__description {

letter-spacing: 2px;

margin-top: -12px;

color: #252d57;

}

• 设置步骤线

::v-deep .el-step.is-vertical .el-step__line {

width: 1px;

top: 19px;

bottom: -8px;

margin-left: -7px;

}

• 设置当前步骤的样式

::v-deep .el-step__head.is-process {

.el-step__icon {

background: transparent;

border-color: #377bff;

}

}

• 设置其他步骤的样式

::v-deep .el-step__icon {

width: 10px;

height: 10px;

border-width: 2.5px;

background: #909399;

border-color: #909399;

}