elementui 修改步骤条数字排序 el-step

方法：

//在接口获取数据成功之后进行，需要用nextTick包裹，否则获取不到dom元素
this.$nextTick(() => {
  [...document.querySelectorAll('.el-steps .el-step__icon div')].forEach((el, index, arr) => {
  console.log(el,arr.length - index,arr.length + 1 - (arr.length - index))
  //el.innerHTML = index + 1; //从小到大 ，默认
  el.innerHTML = arr.length - index //从大到小
  });
})

原因：

通过elementui关于step源码的查看，
/node_modules/element-ui/packages/steps/src/step.vue

<div class="el-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
  <slot
    v-if="currentStatus !== 'success' && currentStatus !== 'error'"
    name="icon">
    <i v-if="icon" class="el-step__icon-inner" :class="[icon]"></i>
    <!-- 这里通过这个dom(div.el-step__icon-inne)进行序号的展示 -->
    <div  class="el-step__icon-inner" v-if="!icon && !isSimple">{{ index + 1 }}</div>
  </slot>
  <i
    v-else
    :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]"
    class="el-step__icon-inner is-status"
  >
  </i>
</div>

所以可以通过在业务文件内修改dom内容控制步骤条上的数字改变。

参考来源：https://segmentfault.com/q/1010000011989320