?1、html內容??Timeline 可拆分成多個按照時間戳排列的活動， 時間戳是其區分于其他控件的重要特征

<el-timeline style="flex: 1; overflow: auto"><!-- activities是接口的返回值格式 --><el-timeline-item v-for="(activity, index) in activities" :key="index" type="primary"><!-- left-style 時間線點左邊可顯示的內容區域 --><div class="left-style"><div style="text-align:right;font-size:14px;color: #515455;">{{activity.updateBy}}</div><div style="padding-top:10px;color:#9DA2A5">{{activity.updateTime}}</div></div><!-- right-style 時間線點右邊可顯示的內容區域 --><div class="right-style"><div style="color: #999;display:flex" v-for="item in activity.record" :key="item.field"><div style="width:100px">{{ item.fieldName }}改為：</div><template v-if="item.field == 'situation'"><div style="white-space: pre-line;flex:1">{{item.newValue}}</div></template><template v-else-if="item.field == 'problem'"><div style="white-space: pre-line;flex:1">{{item.newValue}}</div></template></div></div></el-timeline-item></el-timeline>

?2、數據格式

//時間線顯示內容需要的數據格式
activities:[{updateBy:"張三",createTime:"2022-10-12 10:30:10",updateTime:"2022-10-12 10:37:10",record:[{field:"situation",fieldName: "情況",newValue:"情況修改之后的值newValue",oldValue:"情況修改之前的值oldValue",}]},            {updateBy:"李四",createTime:"2022-10-12 10:30:10",updateTime:"2022-10-12 10:37:10",record:[{field:"problem",fieldName: "問題",newValue:"問題修改之后的值newValue11111",oldValue:"問題修改之前的值oldValue22222",}]}
]

?

3、調節時間線左右顯示的樣式?

 
.el-timeline {max-height: 400px;overflow: auto;padding-left: 150px;position: relative;padding-top: 5px;}.left-style {position: absolute;left: -140px;top: 1px;font-size: 12px;line-height: 100%;}.right-style {line-height: 150%;}

總結

以上是生活随笔為你收集整理的Timeline 时间线基础用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。