项目开发过程中很多时候element的UI组件和实际项目的需求有一样，不能直接复用，我这里是自定义实现步骤条方式

 下面直接展示代码（代码已经有所修改，但是结构没变）

<template>
        <div class="ul_box">
            <ul class="timeline" ref="mytimeline" style="margin-left: 10px;">
                <li class="timeline_item" v-for="(item,index) in oneList" :key="index">
                    <!--圈圈节点-->
                    <div class="timeline_node" :style = " {backgroundColor: item.bgcolor, width: item.size + 'px', height: item.size + 'px'}" :class="{active: item.zt == '1'}">{{index+1}}</div>
                    <!--线-->
                    <div class="timeline_item_line" :class="{active: item.zt == '1'}">
                        {{item.sj}}
                    </div>
                    <!--标注-->
                    <div class="timeline_item_content" :class="{active: item.zt == '1'}" :style="{color: item.color, fontSize: item.fontsize + 'px'}">
                        {{item.mc}}
                    </div>
                </li>
            </ul>
        </div>
</template>

<script>
import { api } from '@/api/'
export default {
    name: 'NodeInformation',
    components: {},
    data() {
        return {
            oneList: [
                  color: '#999',
                  fontsize: 18,
                  size: '34',
                  bgcolor: '#e4e7ed',
                  mc:'苹果',
                  zt:'0'
                }, {
                  timestamp: '2013年',
                  color: '#999',
                  fontsize: 18,
                  size: '34',
                  bgcolor: '#e4e7ed',
                  mc:'雪梨'，
                  zt:'0'
                }, ],
            twoList: [
                 {
                  sj: '2013年',
                  mc:'雪梨'，
                }, 
             ],
        }
    },
    created() {
         for(let i = 0;i < self.fsztList.length; i++) {
             for(let j = 0;j < self.twoList.length; j++) {
                if(self.oneList[i].mc == self.twoList[j].mc) {
                    self.oneList[i].zt = '1'
                    self.oneList[i].sj = self.twoList[j].sj
                       }
                   }
              }
    },
    methods: {
    },
}
</script>

<style lang="scss" scoped>
.ul_box {
    width: 100%;
    height: 100%;
    display: inline-block;
    float: left;
    margin-top: 2px;
    overflow: hidden;
}
.timeline_item {
    display: inline-block;
    width: 260px;
    height: 40px;
    margin-bottom: 50px
}
.timeline_node {
    box-sizing: border-box;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 28px
}
.timeline_node.active {
    background-color: #fff !important;
    border: 6px solid #f68720;
}
.timeline_item_line {
    width: 100%;
    height: 10px;
    margin: -14px 0 0 28px;
    border-top: 2px solid #E4E7ED;
    border-left: none;
    text-align: center;
}
.timeline_item_line.active {
    border-top: 2px solid #f68720;
}
.timeline_item_content {
    margin: 10px 0 0 -10px;
}
.timeline_item_content.active {
    color:#333333 !important
}
</style>

直接展示效果图：

完美解决，希望能帮助到有同样需求的朋友们！！！