<template> <div class="step"> <el-steps direction="vertical" :active="stapesDate.length"> <el-step v-for="i in stapesDate" :title="i.activityName"> <template #description> <div class="direction">时间:{{ i.endTime }}</div> <div class="direction">分配人:{{ i.assigneeName }}</div> <div class="direction">任务备注:{{ i.comment }}</div> </template> </el-step> </el-steps> </div> </template> <script setup> import { ref, onMounted } from 'vue'; const stapesDate = ref([ { activityName: 'xxxx', endTime: '2023-10-24', assigneeName: 'xxxx', comment: 'xxx', }, { activityName: 'xxxx', endTime: '2023-10-24', assigneeName: 'xxxx', comment: 'xxx', }, ]); onMounted(() => {}); </script> <style lang="scss" scoped> .step { padding-left: 30px; } </style>