实际工作中有些情况需要用到时间线，element组件中含有时间线，如果需要自定义的样式，可以自己写一个
代码语言：javascript复制<template>
<div>
myTime line
<ul class="myTimeLine-item-wrap">
<li class="myTimeLine-item" v-for="(item,index) in dataArr" :key="index">
<!-- 左边竖线 -->
<div class="tail gray">
<div class="innerTail"></div>
</div>
<div :class="['node',item.state==0?'nodeGray':item.state==1?'nodeGreen':'']">
<div class="innerNode"></div>
</div>
<div class="contentWrap">
<div class="left">
<div class="title">{{item.title}}</div>
<div class="time">{{item.time}}</div>
</div>
<div class="right">
<ul class="rightContent">
<li v-for="(innerItem,innerIndex) in item.content" :key="innerIndex">{{innerItem.data}}</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</template>数据结构
代码语言：javascript复制 dataArr:[{
state:0,
title:"标题1",
time:"2020-12-31",
content:[{data:"内容1-1"},{data:"内容1-2"}]
},{
state:1,
title:"标题2",
time:"2020-12-31",
content:[{data:"内容1-1"},{data:"内容1-2"},{data:"内容1-2"}]
},{
state:2,
title:"标题3",
time:"2020-12-31",
content:[{data:"内容1-1"},{data:"内容1-2"}]
}],样式
代码语言：javascript复制</script>
<style scoped>
ul{padding-left:15px;list-style:none;padding-right:15px;}
.myTimeLine-item{padding-bottom:20px;position: relative;}
.tail{position:absolute;left:0;top:0;height:100%;border-left:2px dashed #ccc;}
.node{position:absolute;width:14px;height:14px;left:-7px;border-radius:50%;background:#fed6dc;display:flex;justify-content: center;align-items: center;}
.node .innerNode{width:8px;height: 8px;border-radius:50%;background:#fe2f54;}
.nodeGray{background:#ebebeb;}
.nodeGray .innerNode{background:#999999;}
.nodeGreen{background:#dcf4e3;}
.nodeGreen .innerNode{background:#4cca72;}
.contentWrap{display:flex;padding-left:15px;}
.left{width:150px;}
.contentWrap .left .title{font-weight:bold;}
.right{flex:1;padding:10px;border:1px solid #ccc;box-shadow: 1px 1px 8px rgba(0,0,0,0.1),-1px -1px 8px rgba(0,0,0,0.1);}
ul li:last-child .tail{display:none;}
</style>
