Ant Design Vue 之 step步骤条

简介

项目中需要显示进度，如下图：

代码如下：

<a-steps :current="1" size="small">
    <a-step>
      <template #icon>
         <CheckCircleFilled style="font-size: 1.2rem" />
      </template>
      <template #title>注册</template>
      <template #description>
          <span>
             {{ 2022-08-31 }}
          </span>
      </template>
    </a-step>
    
     ......
     
      <a-step>
      <template #icon>
         <div class="cicle"></div>
      </template>
      <template #title>交易成功</template>
      <template #description>
          <span>
             {{ 待完成 }}
          </span>
      </template>
    </a-step>
           
     ......
</a-steps>

因为有完成和未完成两种状态，多个步骤准备使用v-for来循环渲染，于是需要进行判断，想再添加一个template/div用于判断代码如下：

<a-step>
    <!-- <div> -->
    <!-- <template> -->
      <template #icon>
         <CheckCircleFilled style="font-size: 1.2rem" />
      </template>
      <template #title>注册</template>
      <template #description>
          <span>
             {{ 2022-08-31 }}
          </span>
      </template>
      <!-- </template> -->
       <!-- </div> -->
    </a-step>

使用template标签报错如下

于是猜测是因为标签内的slot都是用template标签，顾而不能继续使用template，改为div，报错同template

结论就是，内不能使用额外标签