列表 List
竖排列表样式
Section titled “竖排列表样式”这是一个包括分页、右侧内容、下方列表操作的示例。
通过 actions 来为列表添加操作项。
列表的基本使用方法。可用于承载文字、列表、图片和段落。
通过 grid 属性来配置格栅列表。
使用 list-item-meta 组件可快速指定头像、标题、文字。
通过 grid.sm 等响应式参数动态设置每个单项横跨的列数，注意此时不要设置 grid.span。
通过设置 max-height 属性限制列表的最大高度。通过 reach-bottom 事件可以监听列表触底的事件。
列表组件提供了三种大小 small, medium, large ，可根据业务需求自行选择。
当前示例可以直接切换动态行高和固定行高两种模式：动态模式更适合承载长文案、头像和操作区，固定模式则适合卡片高度完全一致的内容流。建议优先按内容特征选模式，而不是只按数据量决定。
通过指定 virtualListProps 来开启虚拟列表，在大量数据时获得高性能表现。List 默认更偏向动态内容容器：如果你只传 height，组件会按动态高度模式处理；当每一行高度稳定一致时，建议显式传 itemSize，避免不必要的动态测量。完整参数与迁移映射见 虚拟列表迁移指南。
<list> Props
Section titled “<list> Props”| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| data | 列表数据，需要和 item 插槽同时使用 | any[] | - | |
| size | 列表大小 | 'small' | 'medium' | 'large' | 'medium' | |
| bordered | 是否显示边框 | boolean | true | |
| split | 是否显示分割线 | boolean | true | |
| loading | 是否为加载中状态 | boolean | false | |
| hoverable | 是否显示选中样式 | boolean | false | |
| pagination-props | 列表分页配置 | PaginationProps | - | |
| grid-props | 列表栅格配置 | object | - | |
| max-height | 列表的最大高度 | string | number | 0 | |
| bottom-offset | 触发到达底部的距离阈值 | number | 0 | |
| virtual-list-props | 传递虚拟列表属性，传入此参数以开启虚拟滚动。迁移说明与完整参数 | VirtualListProps | - | |
| scrollbar | 是否开启虚拟滚动条 | boolean | ScrollbarProps | true | 2.38.0 |
<list> Events
Section titled “<list> Events”| 事件名 | 描述 | 参数 |
|---|---|---|
| scroll | 列表滚动时触发 | - |
| reach-bottom | 当列表到达底部时触发 | - |
| page-change | 表格分页发生改变时触发 | page: number |
| page-size-change | 表格每页数据数量发生改变时触发 | pageSize: number |
<list> Methods
Section titled “<list> Methods”| 方法名 | 描述 | 参数 | 返回值 |
|---|---|---|---|
| scrollIntoView | 虚拟滚动到某个元素 | options: { index?: number; key?: number | string; align: 'auto' | 'top' | 'bottom'} | - |
<list> Slots
Section titled “<list> Slots”| 插槽名 | 描述 | 参数 | 版本 |
|---|---|---|---|
| scroll-loading | 滚动加载状态时，滚动到底部的提示 | - | 2.20.0 |
| item | 列表项 | index: numberitem: any | |
| empty | 空白展示 | - | |
| footer | 底部信息 | - | |
| header | 头部信息 | - |
<list-item> Props
Section titled “<list-item> Props”| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| action-layout | 操作组排列方向 | Direction | 'horizontal' |
<list-item> Slots
Section titled “<list-item> Slots”| 插槽名 | 描述 | 参数 |
|---|---|---|
| meta | meta信息 | - |
| extra | 额外内容 | - |
| actions | 操作组 | - |
<list-item-meta> Props
Section titled “<list-item-meta> Props”| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | string | - |
| description | 描述内容 | string | - |
<list-item-meta> Slots
Section titled “<list-item-meta> Slots”| 插槽名 | 描述 | 参数 |
|---|---|---|
| avatar | 头像 | - |
| title | 标题 | - |
| description | 描述内容 | - |
VirtualListProps
Section titled “VirtualListProps”| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| items | 列表数据 | unknown[] | [] | |
| keyField | 用于提取每项唯一键，支持字段名或函数 | string | ((item, index) => string | number) | 'key' | |
| height | 可视区域高度 | number | string | - | |
| itemSize | 固定高度模式的 item 高度，传入后使用 RecycleScroller | number | string | ((item, index) => number) | - | |
| minItemSize | 动态高度模式的最小 item 高度；未传 itemSize 时使用 DynamicScroller | number | string | 32 | |
| buffer | 额外渲染缓冲区（像素） | number | 200 |
其余参数与暴露方法请查看 虚拟列表迁移指南。