Antd vue a-list 列表的使用

最新推荐文章于 2025-03-12 10:45:30 发布

花•水•木

最新推荐文章于 2025-03-12 10:45:30 发布

阅读量5.2k

点赞数 1

文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/m0_58002936/article/details/126350825

版权

本文详细介绍了如何使用AntdVue的<a-list>组件进行数据展示和操作。通过设置`:pagination=true`实现分页，利用`:data-source`绑定后端获取的商品列表。在<a-list-item>中，利用slot-scope获取每个商品数据，结合<a-row>和自定义组件<MyCard>展示商品详情。这个例子展示了如何在前端高效地处理和展示从后端获取的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Antd vue a-list 列表的使用

<a-list 标签中，:pagination = true 设置分页，
:data-source 设置数据源，这里我将请求后端获取的商品列表设置为数据源:data-source="goodsLists。

（注意：前面是 goodLists 后面是 goodList）

在 <a-list-item 标签中操作单个数据

其中，slot-scope 可以包含两个参数，item（就是我的 goodsList），index。index应该就是我们每条数据的索引
```
<a-list-item slot="renderItem" slot-scope="goodsList">
    ...
</a-list-item>
```

这样，我们就可以操作列表中的数据啦😁

比如，我将从后端取到的商品放到前端展示，在 a-list 中取出单个商品，放到 a-card 中就可以展示了

<a-list-item slot="renderItem" slot-scope="goodsList">
    <a-row type="flex" justify="space-between">
        <MyCard :goods-list="goodsList" />
    </a-row>
</a-list-item>