el-timeline动态一个一个展示el-timeline-item

前言：要实现在Vue项目中使用ElementUI的el-timeline组件动态一个一个展示el-timeline-item，可以借助Vue的数据绑定和循环遍历功能来逐个添加el-timeline-item。

在你的Vue组件中，你可以使用一个数组来保存要展示的el-timeline-item的数据，然后在模板中使用v-for指令来遍历这个数组并渲染el-timeline-item。

下面是一个示例代码：

<template>
  <div>
    <el-timeline v-if="this.inforList && this.inforList.length > 0">
     <transition-group name="fade">
      <el-timeline-item
        v-for="(item, index) in inforList"
        :key="index"
        :timestamp="item.timestamp"
      >
        {{ item.content }}
      </el-timeline-item>
     </transition-group>
    </el-timeline>
    <div v-else>
       <div class="tipInfo">
         <span class="icon"></span>&nbsp;&nbsp;暂无数据
       </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inforList: [
        //{ timestamp: '2023-10-01', content: '事件1' },
        //{ timestamp: '2023-10-05', content: '事件2' },
        //{ timestamp: '2023-10-10', content: '事件3' }
      ]
    };
  },
  created() {
  	  // 初始化掉接口
      this.getProjectRunDiagnosticHistory();
   },
  methods: {
  	getProjectRunDiagnosticHistory() {
            getProjectRunDiagnosticHistory(this.params).then(res => {
            	this.infors = res;
            	//获取数据成功
                this.getIfoList();
            })
        },
    //核心代码    
  	getIfoList() {
  			//从后台接口获取数据
            let tempList = this.infors.projectRunDiagnosticAbnormalInformationVOS;
            if(tempList && tempList.length > 0) {
                this.inforList.push(tempList[0]);
                let totalLen = tempList.length;
                let leg = 0;
                let timeout = setInterval(()=>{
                    leg++;
                    console.log('循环次数', leg)
                    this.inforList.push(tempList[leg]);
                    if(leg == totalLen-1) {
                        clearInterval(timeout);
                    }
                }, 1000)
            } else {
                this.inforList = [];
            }
            
        },
};
</script>
//如果需要添加动画效果就添加标签<transition-group>包裹<el-timeline-item>标签和css部分
//如果不需要则不用添加<transition-group>标签和css代码
//css部分
<style lang="scss" scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

主要提供思路，具体还要根据不同业务做不同处理，希望有帮助到你们