业务场景:当前步骤条鼠标悬浮提示框,步骤条是for循环出来的
如下图:
<el-steps finish-status="success">
<el-popover
v-for="item in uniqueReverseArr"
placement="top-start"
:title="item.title"
:width="250"
trigger="hover"
>
<template #reference>
<el-step
:status="
item.status == '2'
? 'success'
: item.status == '3'
? 'error'
: item.status == '1'
? 'finish'
: 'process'
"
@click.native="stepClick(item)"
>
<template v-slot:title>
<span>{{ item.title }}</span>
</template>
</el-step>
</template>
<div>
<span class="popoverSpan">traceid:</span>
{{ item.currentTraceId }}
</div>
<div>
<span class="popoverSpan">time:</span>
{{ parseTime(item.executionTime) }}
</div>
</el-popover>
</el-steps>