element UI自定义步骤条

<el-dialog :title="titleNode" :visible.sync="openNode" append-to-body>
      <el-steps direction="vertical" :active="process" space="70px" align-center class="cus-steps">
        <el-step v-for="(titleNode,index) in newArr" :icon=icon>
          <i class="el-icon-success el-step__icon-inner" slot="icon" v-if="titleNode.flag"></i>
          <template slot="description">
            <p>{{titleNode.alarmdate}}</p>
          </template>
          <template slot="title">
            <div v-if="titleNode.node <= 6"> 
              <i class="el-icon-refresh-left" @click="on_click(index,titleNode)" v-if="titleNode.flag"></i>&nbsp;
              <span>{{titleNodeList[titleNode.node]}}</span>
            </div>
            <div v-else>
              <i class="el-icon-refresh-left" @click="on_click(index,titleNode)" v-if="titleNode.flag"></i>&nbsp;
              <span>{{titleNodeList[titleNode.node]}}--第{{Math.ceil((index - 9)/3)+1}}/{{totalNode}}站点</span>
            </div>
          </template>  
        </el-step>
      </el-steps>
    </el-dialog>

在一个对话框中展示垂直的步骤条。 给icon一个默认样式，根据对应的条件改变icon值时使用slot=“icon”。自定义图标、描述和标题。“ el-step__icon-inner ” 类可以使图标变得和 :icon 绑定的一样大。