步骤条动态展示

970 阅读1分钟

步骤条有时候需要根据后端返回的数据,决定有几步,文字,是否成功

先去  Ant Design Vue找到step组件

image.png

网站提供的大部分信息是静态的

而目前需要的动态信息展示

我首先想到的是用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>

这样就达成效果了