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

作者站长头像
站长
· 阅读数 13

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

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

回复
1个回答
avatar
test
2024-07-16

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> 元素。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容