elementui el-step步骤条组件渲染顺序、序号错乱、状态错乱问题

1、问题描述

下面这段代码加上了v-if判断条件，有时候会使页面产生问题，步骤条的顺序会错乱，这个现象如果在show=false的情况下，看页面步骤条是正常的，就不会发现有问题，在show=true的情况下会有问题。。。显示成A-B(序号变成5)-C-D-E(序号变成4)，如下图：

导致错误的代码

<el-steps :active="active" finish-status="success" align-center>
  <el-step title="A"></el-step>
  <el-step v-if="show" title="B"></el-step>
  <el-step title="C"></el-step>
  <el-step title="D"></el-step>
  <el-step title="E"></el-step>
</el-steps>

2、原因

步骤条组件渲染顺序有控制，有判断逻辑的那一个步骤条，会在最后去渲染，所以造成以上问题

3、解决

1. 分开2段来写，show=true的情况渲染一种步骤条，show=false的情况渲染另一种步骤条。

<el-steps v-if="show" :active="active" finish-status="success" align-center>
 <el-step title="A"></el-step>
 <el-step title="B"></el-step>
 <el-step title="C"></el-step>
 <el-step title="D"></el-step>
 <el-step title="E"></el-step>
</el-steps>
<el-steps v-else :active="active" finish-status="success" align-center>
 <el-step title="A"></el-step>
 <el-step title="C"></el-step>
 <el-step title="D"></el-step>
 <el-step title="E"></el-step>
</el-steps>

2. 使用v-for循环渲染步骤条，并且list在show=true或false时列表数据不一样。

<el-steps :active="active" finish-status="success" align-center>
 <el-step v-for="(item, index) in list" :key="index" :title="item.title"></el-step>
</el-steps>

data() {
   return {
     list: [
       {title: 'A'},
       {title: 'B'},
       {title: 'C'},
       {title: 'D'},
       {title: 'E'}
     ]
   }
 },
 methods: {
   listHandle() {
     if(!this.show) {
       this.list = this.list.splice(1,1) // 删除索引的1的1个元素
     }
   }
 }