美文网首页
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显示当前步骤数

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

  • Shell 修改 Bash 提示符

    PS1 值中的输出信息字符及说明 显示当前时间: 运行效果: 显示内核版本: 运行效果: 显示当前用户的进程数: ...

  • mongodb基本操作指令

    基本操作: 帮助 不同级别和命令 常用操作查看当前db版本 显示当前数据库 查询所有数据库 切换数据库 显示当前数...

  • mysql 连接管理sql

    1、显示当前正在执行的MySQL连接。 2、查看每个ip的当前连接数 合并ip 根据ip分开查询 连接具体状态 数...

  • django-分页

    分页显示 步骤:获取当前页---获取总数据---获取分的总页数--每页显示的条数---构建Paganitor对象,...

  • django---分页

    分页显示 步骤:获取当前页---获取总数据---获取分的总页数--每页显示的条数---构建Paganitor对象,...

  • 一些简单的Linux命令

    显示系统当前时间 和日期: date 显示日历(默认按月份):cal cal -y 按年显示 查看磁盘剩余空间的数...

  • linux常见命令

    显示当前路径下所有文件 以长显示模式查看当前路径下所有文件(包括隐藏文件) 查看file文件的行数,字符数 查看当...

  • Shell下的adb 快捷命令

    前言 当前PC连着多个安卓设备时,当超出了 adb 所支持的设备数,步骤如下: adb devices 列出你当前...

  • iOS开发 - MapKit框架之大头针及当前位置

    创建大头针、增加标记及覆盖物 步骤-SB拖入地图视图-然后如下 当前位置实时显示

网友评论

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

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