步骤条有时候需要根据后端返回的数据,决定有几步,文字,是否成功
先去 Ant Design Vue找到step组件
网站提供的大部分信息是静态的
而目前需要的动态信息展示
我首先想到的是用v-for循环
一开始我是这样写的
<a-steps direction="vertical" :current="current" :status="status" v-for="(item, i) in form" :key="i">
<a-step :title="item.title" :description="item.time">
</a-step>
</a-steps>
这样的结果是出现多个步骤条,每个步骤条是独立而不连接的,很明显有问题啊
于是我研究了一下,修改成这样
<a-steps direction="vertical" :current="current" :status="status">
<a-step v-for="(item, i) in form" :key="i" :title="item.title" :description="item.time">
</a-step>
</a-steps>
这样就达成效果了