ant-design-vue中的a-list

Edited on In , ,

Ant-Design官网

a-list

官方介绍与案例很清晰

使用

两种循环方式

一般使用方式一

方式一：

1
2
3
4
5
6
7
8
9
10

<a-list
  itemLayout="horizontal"
  :dataSource="data">
  <a-list-item slot="renderItem"
               slot-scope="item, index"
               :key="index">

  </a-list-item>
</a-list>

方式二：

1
2
3
4
5
6
7
8

<a-list
  itemLayout="horizontal">
  <a-list-item v-for="(item, index) in activities"
               :key="index">

  </a-list-item>
</a-list>

a-list-item

参数 说明 类型 默认值
actions 列表操作组，根据 itemLayout 的不同, 位置在卡片底部或者最右侧 Array/ slot
extra 额外内容, 通常用在 itemLayout 为 vertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧 string|slot -

在 a-list-item 中, actions属性一定是在最后.

在<a-list-item>元素的内部,<a slot="actions">edit</a>的前后位置不会影响按钮在最后.

基本使用方式

a-list-item一般会使用 a-list-item-meta+actions的方式使用. 比如:

属性方式:

1
2
3
4
5
6
7
8
9
10
11
12
13

<a-list-item slot="renderItem"
             slot-scope="item, index"
             :key="index">
  <a-list-item-meta
    src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
    title="title"
    description="Ant">
  </a-list-item-meta>
  <div>content</div>
  <a slot="actions">edit</a>
  <a slot="actions">more</a>
</a-list-item>

slot 方式:

slot 也不会覆盖a-list-item-meta元素的属性.

但是: slot="avatar" 会覆盖 <a-list-item-meta src="***">

1
2
3
4
5
6
7
8
9
10
11
12
13

<a-list-item slot="renderItem"
             slot-scope="item, index"
             :key="index">
  <a-list-item-meta>
    <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
    <a slot="title">title</a>
    <span slot="description">Ant</span>
  </a-list-item-meta>
  <div>content</div>
  <a slot="actions">edit</a>
  <a slot="actions">more</a>
</a-list-item>

a-list-item-meta

参数 说明 类型 默认值
avatar 列表元素的图标 slot -
description 列表元素的描述内容 string slot
title 列表元素的标题 string slot

参数 avatar 的对应属性为 src
src 列表元素的图标 string -

其她参数

List

官方

参数 说明 类型 默认值 版本
bordered 是否展示边框 boolean false
footer 列表底部 string|slot -
grid 列表栅格配置 object -
header 列表头部 string|slot -
itemLayout 设置 List.Item 布局, 设置成 vertical 则竖直样式显示, 默认横排 string -
loading 当卡片内容还在加载中时，可以用 loading 展示一个占位 boolean|object false
loadMore 加载更多 string|slot -
locale 默认文案设置，目前包括空数据文案 object emptyText: ‘暂无数据’
pagination 对应的 pagination 配置, 设置 false 不显示 boolean|object false
size list 的尺寸 default middle small
split 是否展示分割线 boolean true
dataSource 列表数据源 any[] - 1.5.0
renderItem 自定义Item函数，也可使用 slot=”renderItem” 和 slot-scope=”item, index” (item, index) => vNode -
rowKey 各项 key 的取值，可以是字符串或一个函数 item => string|number

List grid props

官方

参数 说明 类型 默认值
column 列数 number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] -
gutter 栅格间隔 number 0
xs <576px 展示的列数 number -
sm ≥576px 展示的列数 number -
md ≥768px 展示的列数 number -
lg ≥992px 展示的列数 number -
xl ≥1200px 展示的列数 number -
xxl ≥1600px 展示的列数 number -

本文地址： https://github.com/maxzhao-it/blog/post/50735/