时间线 timeline 样式修改，时间加在右侧

最新推荐文章于 2023-10-22 14:59:24 发布

Janicelily

最新推荐文章于 2023-10-22 14:59:24 发布

阅读量5.3k

点赞数 1

分类专栏： vue js 文章标签： javascript css vue.js

本文链接：https://blog.youkuaiyun.com/Beth__hui/article/details/108519920

版权

js 同时被 2 个专栏收录

22 篇文章

订阅专栏

vue

12 篇文章

订阅专栏

本文介绍了如何在使用Element-UI时，根据需求将时间线的时间显示位置改为右侧，并添加年份区分。针对后端返回的数据，通过修改CSS样式实现了这一功能，详细步骤包括选择相关元素并调整其样式。同时，提到了颜色和圈圈大小的自定义参数设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司提出的需求如图，时间线要求时间在右侧，且加上年的区分。后端返回的数据仅为每一条一条的数据
在这里插入图片描述
技术栈：element-ui
官网只有 top 和 bottom 的位置参数设置。
通过修改 css样式进行。

第一步
选中时间这个元素发现了这个类样式
在这里插入图片描述

然后修改它就可以，如下

.el-timeline{
  /deep/ .el-timeline-item__timestamp.is-bottom {
      position: absolute;
      left: -100px;
      top: -3px;
      color: #333333;
    }
    /deep/ .el-timeline {
      padding-left: 150px;
    }
  }

至于颜色以及圈圈的大小，可以在官网看到自定义的参数设置。如下所示

在这里插入图片描述

<div class="block">
  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :icon="activity.icon"
      :type="activity.type"
      :color="activity.color"
      :size="activity.size"
      :timestamp="activity.timestamp">
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
</div>

<script>
  export default {
    data() {
      return {
        activities: [{
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }, {
          content: '支持自定义颜色',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        }, {
          content: '默认样式的节点',
          timestamp: '2018-04-03 20:46'
        }]
      };
    }
  };
</script>