vue3如何用Descriptions描述列表动态的展示数组里的数据？

Question

如题，下拉框每次选择不同的选项后，对应要展示的信息数组里面可能是一个对象，可能是两个对象。

那么，怎么用descriptions动态的生成对应的块数来展示数据呢，

Answer 1

给 Descriptions 组件做 v-for 循环就好了。类似于

<template>
  <div class="container">
    <a-descriptions v-for="item in optionList" :key="item.id" :title="'User Info: '+item.userName">
      <a-descriptions-item label="UserName">{{item.userName}}</a-descriptions-item>
      <a-descriptions-item label="Telephone">{{item.telephone}}</a-descriptions-item>
      <a-descriptions-item label="Remark">{{item.remark}}</a-descriptions-item>
    </a-descriptions>
  </div>
</template>

这个 optionList 就是你选择之后的需要展示的结果。

---

如果说你要在一个 Descriptions 组件中去展示。那么把 v-for 所在的位置从 <a-descriptions> 中变更到 内部的 <template> 上就可以了，这个 template 包裹的就是你的 <a-descriptions-item> 元素。