Element 步骤条在步骤过多时，存在展示拥挤、文字重叠的情况，因此对其进行封装，实现多行步骤条效果。实现效果图如下：

组件封装代码

<template>
  <div class="line-steps">
    <template v-for="(step_arr, step_idx) in stepdata">
      <el-steps
        :active="activeList[step_idx]"
        :key="step_idx.toString() + 'step'"
        :space="space"
        :align-center="align_center"
        :process-status="process_status"
        :finish-status="finish_status"
        class="steps-style"
      >
        <el-step
          v-for="(item, index) in step_arr"
          :key="index.toString() + 'step_item'"
          :title="item.title"
          :description="item.description"
          :status="item.status"
        >
          <template slot="icon">
            <span v-if="item.icon"><i :class="item.icon"></i></span>
            <span style="font-weight: 700" v-else>{{
              step_idx * linenum + index + 1
            }}</span>
          </template>
        </el-step>
      </el-steps>
    </template>
  </div>
</template>

<script>
export default {
  name: "LineSteps",
  props: {
    // 步骤条数据
    data: {
      type: Array,
      default: function() {
        return [
          {
            title: "步骤1",
            description: "这是一段很长很长很长的描述性文字",
            icon: "",
            status: ""
          },
          {
            title: "步骤2",
            description: "这是一段很长很长很长的描述性文字",
            icon: "",
            status: ""
          },
          {
            title: "步骤3",
            description: "这是一段很长很长很长的描述性文字",
            icon: "",
            status: ""
          },
          {
            title: "步骤4",
            description: "这是一段很长很长很长的描述性文字",
            icon: "",
            status: ""
          },
          {
            title: "步骤5",
            description: "这是一段很长很长很长的描述性文字",
            icon: "",
            status: ""
          },
          {
            title: "步骤6",
            description: "这是一段很长很长很长的描述性文字",
            icon: "",
            status: ""
          },
          {
            title: "步骤7",
            description: "这段就没那么长了",
            icon: "",
            status: ""
          }
        ];
      }
    },
    // 当前激活步骤
    active: {
      type: Number,
      default: 3
    },
    // 单行步骤数
    linenum: {
      type: Number,
      default: 4
    },
    // 进行居中对齐
    align_center: {
      type: Boolean,
      default: false
    },
    // 设置当前步骤的状态
    process_status: {
      type: String,
      default: "process"
    },
    // 设置结束步骤的状态
    finish_status: {
      type: String,
      default: "finish"
    }
  },
  data() {
    return {
      stepdata: [],
      activeList: [],
      space: ""
    };
  },
  mounted() {
    this.resetData();
  },
  methods: {
    // 重置步骤条数据
    resetData() {
      var data = this.data;
      this.activeList = [];
      this.stepdata = data.reduce(
        (pre, next, idx) => {
          // reduce 用来便利数组，具体语法就 rtfm 吧
          const inner = pre[~~(idx / this.linenum)]; // ~~用来取整，inner 是内层数组
          if (inner !== undefined) {
            // 判断有没有内层数组
            inner.push(next); // 如果有就把遍历的值 next push 到内层数组里
          } else {
            pre.push([next]); // 没有就新建一个包含 next 的数组，作为内层数组
          }
          return pre;
        },
        [[]]
      );
      // 设置active
      const active = ~~(this.active / this.linenum);
      for (var i = 0; i < this.stepdata.length; i++) {
        if (active > i) {
          this.activeList.push(this.linenum);
        } else {
          const dvalue = this.active - this.linenum * i;
          this.activeList.push(dvalue);
        }
      }
      // 设置间距
      var num = 100 / this.linenum;
      this.space = num.toString() + "%";
    }
  },
  watch: {
    data: {
      handler(val) {
        this.resetData();
      },
      deep: true
    },
    linenum: {
      handler(val) {
        var num = 100 / val;
        this.space = num.toString() + "%";
      },
      deep: true
    }
  }
};
</script>

<style scoped>
.line-steps {
  position: relative;
  width: 100%;
  text-align: left;
}
.line-steps .steps-style {
  margin-bottom: 1rem;
}
</style>

实现效果