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

 

// 這是我想到的一個解決方法，可能也會有些不對或者不足的地方，若是你們有什麼更好的方法或者插件，能夠指出來互相學習一下