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

介绍

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

实现代码

Vue3代码

html 复制代码
<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代码

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
  }
}

完整代码

js 复制代码
<template>
  <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>
</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>
相关推荐
过期的H2O22 分钟前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage2 分钟前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发4 分钟前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
工业互联网专业13 分钟前
Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计
**之火25 分钟前
Web Components 是什么
前端·web components
顾菁寒26 分钟前
WEB第二次作业
前端·css·html
前端宝哥27 分钟前
10 个超赞的开发者工具,助你轻松提升效率
前端·程序员
你好龙卷风!!!28 分钟前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
Ljw...1 小时前
Vue.js组件开发
vue.js
兔老大的胡萝卜1 小时前
threejs 数字孪生,制作3d炫酷网页
前端·3d