element ui step组件在另外一侧加时间轴显示

　　这是我开发的时候遇到的一个问题：项目须要在步骤条（竖直方向）的另外一侧加时间显示，可是我在element ui 的step组件中一直没找着设置方法，因此就本身想了个办法加进来，效果以下：

 

代码以下，先上HTML部分：

<div class="delate-step" v-if="detailContent.handle_list.length !==0">

　　<span>处理环节：</span>

　　<div style="width: 100%; height: 300px; padding-bottom: 40px; display: table;margin-top: 10px;">

　　　　<div class="delate-step-lt">

　　　　　　<div

　　　　　　　　class="delate-time"

　　　　　　　　:style="{'top': `${index*((300-46)/(detailContent.handle_list.length-1))+4}px`}"

　　　　　　　　v-for="(item, index) in detailContent.handle_list"

　　　　　　　　:key="index"

　　　　　　　　>{{item.h_time}}</div>

　　　　　　</div>

　　　　　　<div class="delate-step-rt">

　　　　　　　　<el-steps direction="vertical" :active="delate_result">

　　　　　　　　<el-step

　　　　　　　　　　v-for="(item, index) in detailContent.handle_list"

　　　　　　　　　　:key="index"

　　　　　　　　　　:title="item.department"

　　　　　　　　　　:description="item.h_result==='null'?'':item.h_result"

　　　　　　　　></el-step>

　　　　　　</el-steps>

　　　　</div>

　　</div>

</div>

而后是css部分：

.delate-step-lt {
    width: 80px;
     color: #818181;
     font-size: 13px;
     display: table-cell;
     position: relative;
     .delate-time {
          position: absolute;
           // &:first-child {
            //   top: 4px;
            // }
            // &:nth-child(2) {
            //   top: 80px;
            // }
            // &:nth-child(3) {
            //   top: 170px;
            // }
            // &:last-child {
            //   bottom: 24px;
            // }
      }
}
.delate-step-rt {
  display: table-cell;
}

　　

　　如今说说实现过程吧：

　　（1）首先先用一个大的div包裹在最外层，而后给它设置display：table属性，目的是让其下面的两个子div等高（两个子div须要设置display：table-cell属性）

　　（2）而后将时间轴放左边的div中，须要给这个div设置一个属性position：relative，element ui的step组件放在右边的div中，这样就实现时间轴呈如今竖向step的另外一侧了。

　　（3）剩下的则是显示位置跟step 的 title 水平显示的问题了，先给每一个显示的时间轴设置绝对定位属性position：absolute，一开始我想到的是使用css的伪类进行设置，如上css部分注释的代码，效果还行，可是后面想到个人step步骤数量是动态的，若是步骤数量发生了变化（变多或者变少），那么css设置的样式就没用了，因此这条路就走到尽头（不过如果固定步骤数量，直接这样设置是没问题的）；后面想起来vue的样式绑定属性：style，因而就有了下面的计算：

:style="{'top': `${index*((300-46)/(detailContent.handle_list.length-1))+4}px`}"

// index --- 遍历出来的每一个时间轴数据的下标

// 300 --- 整个step组件的高度（能够根据本身须要进行调整），

// 46 --- 是由于我设置了padding-bottom为46，因此减去这个值，

// detailContent.handle_list --- 时间轴数组，

// 4 --- 由于第一个是靠顶部显示的，多加4px是想让时间轴显示的位置下沉一点

计算过程：用步骤条的显示高度(300-46)除以detailContent.handle_list.length-1(由于第一个默认在top：0px的位置了，因此咱们只须要计算剩下的detailContent.handle_list.length-1个时间轴数据显示的位置便可)，这样就能够获得每一个时间轴之间的间距，而后乘以每一个时间轴下标，将乘的结果设置成每一个时间轴div的top值，便可让时间轴按咱们想要的结果进行显示了

 

// 这是我想到的一个解决方法，可能也会有些不对或者不足的地方，若是你们有什么更好的方法或者插件，能够指出来互相学习一下