element 中步骤条组件的使用

element steps组件简单使用

之前遇到的一个后台项目，需要展示流程节点信息，于是根据需求对 element ui 的steps组件 进行处理，适配个人需求。

      <el-steps :active="typeIndex" align-center> // active代表当前节点  align-center代表节点下面的内容居中显示
        <el-step
          v-for="(item, i) in processNode"
          :key="i"
          :icon="typeIndex > i ? 'el-icon-circle-check' : ''"  // 这是因为finish-status属性生成已完成颜色样式（绿色）不符合我的需求
          :title="item.nodeName"  // 内容的信息（步骤条下面第一行）
          :description="item.nodeTime ? `(${item.nodeTime})` : ''"  // 对内容的描述（我这里因为需求做了个三元逻辑）
          :style="item.nodeTime ? 'cursor: pointer;' : ''"  // 这里是对鼠标悬浮样式的处理（点击事件中当前节点之前的节点都做了禁止点击的处理，因此取消鼠标悬停样式）
          @click.native="getInfo(item, i)"
        ></el-step>
      </el-steps>

      nodeInfo({ code: this.code }).then(res => {
        res.data.forEach(item => {
          if (item.node === 1) {
            this.$set(item, 'nodeName', '试用期')
          } else if (item.node === 2) {
            this.$set(item, 'nodeName', '正式上线')
          } else if (item.node === 3) {
            this.$set(item, 'nodeName', '移装')
          } else if (item.node === 4) {
            this.$set(item, 'nodeName', '报废')
          }
        })
        this.typeIndex = res.data.length - 1
        this.processNode = res.data
      })
      // 对步骤条中需要的数据进行处理, 个人需求需要的是下面这样的数据格式
      // [{
      //   node: 1,
      //   nodeName: '移装',
      //   nodeTime: ''
      // },
      // {
      //   node: 2,
      //   nodeName: '报废',
      //   nodeTime: ''
      // }]

下面是生的效果图：

补充信息：

<el-step title="步骤一">
  <div slot="description" class="description-info">
 	// 这里可以用插槽配合样式特殊处理 description 属性内容
  </div>
</el-step>

description 插槽可以做到下面（不限于这种）样式处理