要让步骤条的前面显示对号,可以使用slot插槽来自定义每个步骤的图标。修改代码如下:
<a-steps direction="vertical" :current="currentNum.length - 1" class="steps-style">
<a-step v-for="current in currentNum" :key="current.id">
<template slot="title">
<div class="desc-info">
<div style="margin-left: 10px">{{ current.operateNode }}</div>
</div>
</template>
<template slot="description">
<div class="desc-info" style="margin-top: 15px">
<div>{{ formatDateTime(current.examDt) }}</div>
<div v-if="current.operateType === '拒绝'" style="color:#d53d2a">拒绝</div>
<div v-else style="color: #2eabff">{{ current.operateType }}</div>
</div>
</template>
<!-- 在这里添加自定义的图标 -->
<template slot-scope="{ icon }">
<span v-if="icon === 'wait'">✓</span> <!-- 对号图标 -->
</template>
</a-step>
</a-steps>
在模板中,我们为每个步骤添加了一个自定义的图标插槽,通过判断当前步骤的状态来显示不同的图标。在上述代码中,我们使用了 “✓” 实体编码来表示对号图标。
注意:这只是一个简单的示例,实际应用中你可能需要根据具体的步骤状态来显示不同的图标或样式。
内容由零声教学AI助手提供,问题来源于学员提问




