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%;}