實現效果如下：  element實現方法：[官網通道](http://element.eleme.io/#/zh-CN/component/steps) 1.element實現放在一個頁面，加入一個步驟內容太多，有時候頁面又多。一個代碼文件綁定數據，方法，我想知道你得寫多少行代碼才能填滿你肚子，人要知足啊！就是寫在里邊，要維護的話，你找吧，土里邊找土疙瘩，累死你，如果你寫的還好，如果別人來看你寫的，或者你看別人寫的，你是不是該罵街了。當然也可以用路由拆成模塊。 2.樣式修改，看樣子官網的可定制化還挺高，數字，包含狀態的，包含描述的，橫著的，豎著的……可是改起來，好，好好改吧，認認真真的。萬一需求非要按設計稿的來，哦，好吧，這改組件樣式的時間我早自己寫樣式的時間出來了，好修改好維護。 ~~~ <div class="zk_tm_header"> <ul class="zk_tm_progress"> <li> <p class="zk_tmpg_title">導入座次表</p> <p class="zk_tmpg_box"><span class="spanNum" :class="{'spanProgress':path>0}">1</span></p> </li> <li> <p class="zk_tmpg_title">導入學籍照</p> <p class="zk_tmpg_box"><span class="spanline" :class="{'spanProgress':path>1}"></span><span class="spanNum" :class="{'spanProgress':path>1}">2</span></p> </li> <li> <p class="zk_tmpg_title">采集樣本</p> <p class="zk_tmpg_box"><span class="spanline" :class="{'spanProgress':path>2}"></span><span class="spanNum" :class="{'spanProgress':path>2}">3</span></p> </li> <li> <p class="zk_tmpg_title">位置校準</p> <p class="zk_tmpg_box"><span class="spanline" :class="{'spanProgress':path>3}"></span><span class="spanNum" :class="{'spanProgress':path>3}">4</span></p> </li> <li> <p class="zk_tmpg_title">樣本訓練</p> <p class="zk_tmpg_box"><span class="spanline" :class="{'spanProgress':path>4}"></span><span class="spanNum" :class="{'spanProgress':path>4}">5</span></p> </li> <li> <p class="zk_tmpg_title">識別檢測</p> <p class="zk_tmpg_box"><span class="spanline" :class="{'spanProgress':path>5}"></span><span class="spanNum" :class="{'spanProgress':path>5}">6</span></p> </li> </ul> </div> <router-view @fatherpath="fatherpath"></router-view> ~~~ 子步驟，我是通過路由來實現的，頁面代碼量少，方便自己查看，關鍵別人來維護的話也一目了然。 到了第幾步驟，需要子路由給父級路由傳值 代碼如下：（跳轉到步驟2，就設置為2，然后通過綁定的fatherpath傳遞給父組件）； ~~~ data() { return { path:1 } } created () { this.setPath() }, methods:{ setPath () { this.$emit('fatherpath',this.path); }, } ~~~