关于element-ui步骤条及插槽使用问题的一点总结

emmmmm，这篇文章写一下element-ui步骤条的使用，好吧，其实不是我使用步骤条，是别人在项目中使用的步骤条，我学习了一下用法，在这里记录一下，欢迎大家评论区讨论补充。

1. 首先我们看一下官网的介绍，步骤条是干嘛的，下面是官网给的介绍：
   Steps 步骤条：引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
2. 这里我们记录一下含状态的有描述的步骤条，这里的描述内容，我们使用插槽的方式。下面看下官网给出的例子：
   
   官网给的例子比较简单，我们看下步骤条的主要属性：

• active：接受一个Number，表明步骤的 index，从 0 开始；
• space：每个 step 的间距，不填写将自适应间距。支持百分比；
• direction：显示方向，设置步骤条为水平方向或者竖直方向；
• finish-status：设置结束步骤状态；
  还有很多属性，这里不一一介绍了，大家可以查阅官方文档进行选择和使用。下面，我们看下项目中实现的效果：
  

步骤条和时间线最大的区别就是时间线有时间，步骤条没有，如果步骤条加上时间描述的话，我感觉和时间线差不多（不知道我理解的对不对，如果不对的话，欢迎大家评论区指教）。
3. 官网给出的例子很简单，在实际的开发过程中，数据都是从后台请求的，我们先来看看上面实现的代码：

<div
  style="width: 100%; margin: 0 auto; padding: 20px; margin-top: 40px"
  v-if="statuslist.length > 0"
  >
  <el-steps :active="active" finish-status="success" align-center="true">
          <el-step
            v-for="(item, index) in statuslist"
            :key="index"
            :title="item.approveName"
            :icon="geticon(item)"
          >
            <span slot="description" style="margin-top: 20px" v-if="item.approveStatus == 1">
              <span
              >{{item.deptName}}</span
              ><br/>
              <span>{{ item.approveTime }}</span
              ><br/>
              <br/>
            </span>
            <span slot="description" style="margin-top: 20px" v-else-if="item.approveStatus == 2">
               <span
               >{{item.deptName}}</span
               ><br/>
              <span>{{ item.approveTime }}</span
              ><br/>
               <span style="text-align: center"
               >审批不通过</span
               ><br/>
               <span
               > {{item.approveUser}} </span
               ><br/>
               <span
               >{{ item.approveUserPhone }}</span
               ><br/>
            </span>
          </el-step>
        </el-steps>
</div>

• statuslist就是步骤条的显示数据，数据格式为一个数组中包含多个对象，等会会在下面贴上数据截图，通过循环遍历，拿到每一个步骤的步骤名称作为:title属性的内容，:icon可以设置图标样式，绑定方法，可以传入当前步骤条数据，在进行数据渲染之前，要先判断步骤条的数据，数据不能少于2条。
• 当审批通过和审批不通过的时候，描述内容不同，这里使用了插槽的方式。item.approveStatus == 1时表示审批已通过，显示审批机构和审批时间，item.approveStatus == 2时表示审批不通过，要手动添加审批不通过这个描述，页面布局大概就是这样子的，下面我们看看逻辑部分；

 async handledetail(row) {
      //0 未审批  2审批不通过 1审批通过
      await trace({ requestId: row.requestId }).then((res) => {
        this.statuslist = res.rows;
         var rows = res.rows;
         var successarr = [];
         rows.map((item) => {
           if (item.approveStatus == 1) {
             successarr.push(item.approveStatus);
           }
         });
         this.active = successarr.length;
      });
      this.wuliuopen = true
    },

• 上面写了，设置active属性，接受一个Number，表明步骤的 index，从 0 开始。说到Number的话，我们首先想到数组，因为数组是有长度的，所有我们可以把审批通过的数据步骤放在一个数组中，然后数组的长度就是步骤条完成的步骤，把数组长度赋值给:active属性，就可以得到完成的步骤了。下面贴一下数据的截图：
  
      以上就是含状态和描述内容，并且使用了描述的具名插槽的一点小小的总结了，欢迎大家评论指正。
      因为我是三月份才开始实习的，刚开始上手element-ui的时候，感觉还不太习惯，用了一段时间后，真香！！！感觉自己还是很菜，希望在以后的日子里，自己能好好学习，尽快成长起来。