element steps组件简单使用
之前遇到的一个后台项目,需要展示流程节点信息,于是根据需求对 element ui 的steps组件 进行处理,适配个人需求。
<el-steps :active="typeIndex" align-center> // active代表当前节点 align-center代表节点下面的内容居中显示
<el-step
v-for="(item, i) in processNode"
:key="i"
:icon="typeIndex > i ? 'el-icon-circle-check' : ''" // 这是因为finish-status属性生成已完成颜色样式(绿色)不符合我的需求
:title="item.nodeName" // 内容的信息(步骤条下面第一行)
:description="item.nodeTime ? `(${item.nodeTime})` : ''" // 对内容的描述(我这里因为需求做了个三元逻辑)
:style="item.nodeTime ? 'cursor: pointer;' : ''" // 这里是对鼠标悬浮样式的处理(点击事件中当前节点之前的节点都做了禁止点击的处理,因此取消鼠标悬停样式)
@click.native="getInfo(item, i)"
></el-step>
</el-steps>
nodeInfo({ code: this.code }).then(res => {
res.data.forEach(item => {
if (item.node === 1) {
this.$set(item, 'nodeName', '试用期')
} else if (item.node === 2) {
this.$set(item, 'nodeName', '正式上线')
} else if (item.node === 3) {
this.$set(item, 'nodeName', '移装')
} else if (item.node === 4) {
this.$set(item, 'nodeName', '报废')
}
})
this.typeIndex = res.data.length - 1
this.processNode = res.data
})
// 对步骤条中需要的数据进行处理, 个人需求需要的是下面这样的数据格式
// [{
// node: 1,
// nodeName: '移装',
// nodeTime: ''
// },
// {
// node: 2,
// nodeName: '报废',
// nodeTime: ''
// }]
下面是生的效果图:
补充信息:
<el-step title="步骤一">
<div slot="description" class="description-info">
// 这里可以用插槽配合样式特殊处理 description 属性内容
</div>
</el-step>
description 插槽可以做到下面(不限于这种)样式处理