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、解决
- 分开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>
- 使用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个元素 } } }