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值，即可讓時間軸按我們想要的結果進行顯示了

 

// 這是我想到的一個解決方法，可能也會有些不對或者不足的地方，如果大家有什么更好的方法或者插件，可以指出來互相學習一下