列表

更新时间:2025-01-24 07:41:24

简介

列表组件是一种用于显示一组相关项目的用户界面元素,帮助用户快速浏览、选择或管理项目。

image

配置项

分类

配置

示例

说明

分类

配置

示例

说明

内容

数据源

image

列表的数据源。

主键

image

主键是用于唯一标识每一条数据的字段,确保数据的完整性和准确性。

交互

隐藏

image

控制列表组件的默认展示状态,为true 时将隐藏组件。详情参见通用属性

可选中

image

数据是否支持选中,展示选中状态。

默认选中

image

「可选中」配置项开启时生效,值为数据的主键值。

分页设置

image

列表的分页配置,开启后支持翻页。

加载

image

列表的加载状态

样式

高度

image

详情参见通用属性

外边距

image

详情参见通用属性

内边距

image

详情参见通用属性

列表形式

image

列表的展示形式。

分割线

image

列表模式下生效,数据是否以分割线间隔。

列数

image

「列表形式」为网格时生效,一行展示的数据个数。

栅格间距

image

「列表形式」为网格时生效,数据之间的间距。

空状态文案

image

列表数据源为空时的展示文案

CSS 样式

溢出

image

设置数据溢出列表所需的行为,对应 CSS 属性:overflow详情参见 mdn 详细说明

背景色

image

设置背景颜色,对应 CSS 属性:background-color,查看 mdn 详细说明

背景

image

设置各种背景属性,包括 color, image, origin 与 size, repeat 方式等,对应 CSS 属性:background,查看 mdn 详细说明

背景图片

image

设置一个或者多个背景图像,对应 CSS 属性:background-image,查看 mdn 详细说明

阴影

image

设置阴影效果,对应 CSS 属性:box-shadow,查看 mdn 详细说明

上边框

image

设置上边框属性,对应 CSS 属性:border-top, 查看 mdn 详细说明

下边框

image

设置下边框属性,对应 CSS 属性:border-bottom, 查看 mdn 详细说明

左边框

image

设置左边框属性,对应 CSS 属性:border-left, 查看 mdn 详细说明

右边框

image

设置右边框属性,对应 CSS 属性:border-right, 查看 mdn 详细说明

圆角

image

列表组件的圆角,对应 CSS 属性:border-radius,查看 mdn 详细说明

边框

image

列表组件的边框,对应 CSS 属性:border, 查看 mdn 详细说明

选中态背景色

image

「可选中」为true时生效,列表数据项被选中时的背景颜色

选中态Hover背景色

image

可选中」为true时生效,鼠标悬浮在列表数据项时的背景颜色

属性与方法

名称

类型

示例

说明

名称

类型

示例

说明

dataSource

array

list1.dataSource

当前列表组件的数据源

loading

boolean

list1.loading

当前列表组件的加载状态

selectedKey

string

list1.selectedKey

当前选中数据项的主键值

pagination

object

list1.pagination

只读,当前列表组件的分页信息

setDataSource

func

list1.setDataSource(xxxx)

设置列表组件的数据为xxxx

clearDataSource

func

list1.clearDataSource()

清除列表组件的数据

setLoading

func

list1.setLoading(true)

设置列表组件的加载状态,参数值为true或者false

clearLoading

func

list1.clearLoading()

清除列表组件的加载状态

setSelectedKey

func

list1.setSelectedKey('option1')

设置列表组件的选中数据项的主键值为option1

clearSelectedKey

func

list1.clearSelectedKey()

清除列表组件的选中数据项的主键值

事件回调

配置

说明

配置

说明

image

当点击单元项时将触发的事件

  • 本页导读
  • 简介
  • 配置项
  • 属性与方法
  • 事件回调