美文网首页
el-steps simple显示当前步骤数

el-steps simple显示当前步骤数

作者: 青争小台 | 来源:发表于2020-05-07 11:32 被阅读0次

    elementui的步骤条组件(el-steps)
    普通样式长这样,title(步骤1,步骤2)位于下面

    截屏2020-05-07上午11.22.46.png
    想要的是在一条线上,这时看文档发现该组件有一个simple属性(是否应用简洁风格)
    拿来一试果然在一条线上了,长这样
    image.png
    但是圈里的数字1,2没有了,这时需要这样做<template slot="icon" >{{index+1}}</template>代码如下:
    <el-steps :active="curSteps"  finish-status="success" simple v-if="showStep && steps.length > 1">
      <el-step v-for="(item,index) in steps" :title="item" :key="`step${index}`">
        <template slot="icon" >{{index+1}}</template>
      </el-step>
    </el-steps>
    

    然后就搞定了,结果是这样的


    image.png

    如果想要把图标换成图片,就像这样


    截屏2020-05-07上午11.30.50.png

    那么看代码:

    <el-steps :active="1">
      <el-step title="步骤 1">
        <template slot="icon" >
          <img src="http://img4.imgtn.bdimg.com/it/u=2480604110,4008147240&fm=26&gp=0.jpg" style="height:25x;width:25px;">
        </template>
      </el-step>
      <el-step title="步骤 2" icon="el-icon-upload">
        <template slot="icon" >
          <img src="http://img.zcool.cn/community/01bc1c5694b3e932f87574bef9bc29.png" style="height:25x;width:25px;">
        </template>
      </el-step>
      </el-step>
      <el-step title="步骤 3" icon="el-icon-picture"></el-step>
    </el-steps>
    

    相关文章

      网友评论

          本文标题:el-steps simple显示当前步骤数

          本文链接:https://www.haomeiwen.com/subject/jcvoghtx.html