el-timeline实现左右两侧节点的效果

首先是效果图

主要实现方式就是这一段 left: index % 2 === 0 ? ‘20px’ : ‘-150px’,原理是通过index 判断如果是偶数行则让节点处于左侧，要记得添加position: 'absolute’样式才会生效

 <el-timeline style="margin-left: 50%">
        <el-timeline-item v-for="(item, index) in timelineData" :key="item.id" placement="top">
          <div style="display: flex; align-items: center;height: 50px;margin-bottom: 50px">
            <p :style="{
                marginBottom: '5px',
                opacity: '0.5',
                left: index % 2 === 0 ? '20px' : '-150px',
                position: 'absolute'
                  }">
              {{ item.auditorUserName !== null ? item.auditorUserName : item.initiatorUserName }}
              <br>
              {{ item.approvalTime }}
            </p>
            <el-card :style="{
                    width: '500px',
                    left: index % 2 === 0 ? '-520px' : null,
                    position: 'absolute'
                  }">
              <h2>{{ item.roleName }}</h2>
              <p style="margin-top: 5px">{{item.auditorUserName !== null ? item.approvalOpinion : '发起审批' }}</p>
            </el-card>
          </div>
        </el-timeline-item>
      </el-timeline>