vue 手动书写步骤条

背景：

对于多条处置记录需要使用导航条展示出多条数据之间的逻辑先后，手动封装一个竖着的步骤条

效果展示：

封装代码：

<div class="disposition-record"><template v-if="state3.tableData.length"><el-timeline><el-timeline-itemv-for="(item, index) in state3.tableData":key="index":hollow="true"><div class="record-item"><div class="item-title"><div>处理人:<span>{{ item.createuser }}</span></div><div>{{ item.createtime }}</div></div><div class="item-content"><div class="content"><div>处置内容:</div><div>{{ item.content || "暂无" }}</div></div></div></div></el-timeline-item></el-timeline></template><div v-else>暂无处置记录</div>
</div>

封装样式：

<style lang="scss" scoped>
.item-table-box {height: 86%;display: flex;
}
.disposition-record {box-sizing: border-box;padding: 0px 10px 0px 15px;color: #ffff;:deep(.el-timeline) {height: 600px !important;padding-top: 10px;overflow-y: auto;padding-left: 10px;.el-timeline-item__wrapper {padding-left: 20px;}--el-timeline-node-color: #23bd3c;.record-item {box-sizing: border-box;padding: 0px 10px 0px 0px;color: #ffff;.item-title {display: flex;justify-content: space-between;align-items: center;div:last-child {color: #74cdff;}}.item-content {background: #1c5377;width: 100%;min-height: 54px;margin-top: 5px;padding: 5px;.content {display: flex;border: 0px solid #00fffb !important;border-bottom: none;div:first-child {color: #74cdff;width: 60px;}div:last-child {width: calc(100% - 60px);white-space: pre-wrap;color: #ffffff;font-size: 14px;line-height: 22px;}}}}}
}
</style>

备注：

其中涉及到的数据如下：

[
{
"pid": 7,
"warningId": 11987,
"content": "测试继续处置",
"createtime": "2025-09-03 16:33:02",
"createuser": "jiangjia"
},
{
"pid": 5,
"warningId": 11987,
"content": "船舶川蓬安渡0012，您已进入八字老渡口禁航区，请改变航向，请立即驶离!333",
"createtime": "2025-09-03 16:22:43",
"createuser": "jiangjia"
},
{
"pid": 2,
"warningId": 11987,
"content": null,
"createtime": "2025-09-03 16:10:44",
"createuser": "jiangjia"
}
]