当前位置：首页 > news >正文

ElementPlus---Timeline 时间线组件使用示例

news 2025/8/8 10:10:55

介绍

使用ElementPlus时间线组件在后台首页实现通知公告列表展示，使用Vue3开发。

实现代码

Vue3代码

<el-timeline><el-timeline-itemstyle="max-width: 600px"v-for="(activity, index) in activities":key="index":timestamp="activity.releaseTime"placement="top"><el-card><h4>{{ activity.name }}</h4><p>{{ activity.content }}</p></el-card></el-timeline-item><el-timeline-item><RouterLink to="/homeNotice">更多</RouterLink></el-timeline-item></el-timeline>

JS代码

///列表
const activities = ref<SysNotice[]>([])
onMounted(() => {getNoticeList()
})const getNoticeList = async () => {const { code, data } = await crudApi.listUrl<SysNotice>(SysIndexUrl.GetNotice.replace('{num}', '3'))if (code === 200) {activities.value = data}
}

完整代码

<template><el-timeline><el-timeline-itemstyle="max-width: 600px"v-for="(activity, index) in activities":key="index":timestamp="activity.releaseTime"placement="top"><el-card><h4>{{ activity.name }}</h4><p>{{ activity.content }}</p></el-card></el-timeline-item><el-timeline-item><RouterLink to="/homeNotice">更多</RouterLink></el-timeline-item></el-timeline>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue'
import { RouterLink } from 'vue-router'
import type { SysNotice } from '@/api/types'
import crudApi from '@/api/system/crudApi'
import { SysIndexUrl } from '@/api/urls'///列表
const activities = ref<SysNotice[]>([])
onMounted(() => {getNoticeList()
})const getNoticeList = async () => {const { code, data } = await crudApi.listUrl<SysNotice>(SysIndexUrl.GetNotice.replace('{num}', '3'))if (code === 200) {activities.value = data}
}
</script><style scoped>
.name {cursor: pointer;
}
</style>