ElementPlus---Timeline 时间线组件使用示例-实现代码

时间:2024-10-04 07:14:05

Vue3代码

<el-timeline>
    <el-timeline-item
      style="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
  }
}

相关文章