ElementUI Timeline 时间线

最新推荐文章于 2025-09-11 04:09:35 发布

原创

最新推荐文章于 2025-09-11 04:09:35 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化 #html #js #jquery #vue

本文介绍如何使用 Vue.js 重置官方提供的 timeline 组件样式，实现了一个包含处理进度、描述、操作员和时间等信息的时间线视图，适合个性化需求的展示.

一、概述

可视化地呈现时间流信息。

官方链接：https://element.eleme.cn/#/zh-CN/component/timeline

二、优化

官方列举的样式，不符合实际需求，因此需要自己写一个。

test.vue

<template>
  <div style="width: 50%">
    <div class="handle-list">
      <div class="data-title">
        <div style="border-bottom: 1px solid #eee;margin-bottom: 20px;"></div>
        <div class="press text">处理进度</div>
        <div class="des text">描述</div>
        <div class="users text">处理人员</div>
        <div class="times text">处理时间</div>
      </div>
      <div&