简介
列表组件是一种用于显示一组相关项目的用户界面元素,帮助用户快速浏览、选择或管理项目。
配置项
分类 | 配置 | 示例 | 说明 |
分类 | 配置 | 示例 | 说明 |
内容 | 数据源 | 列表的数据源。 | |
主键 | 主键是用于唯一标识每一条数据的字段,确保数据的完整性和准确性。 | ||
交互 | 隐藏 | 控制列表组件的默认展示状态,为 | |
可选中 | 数据是否支持选中,展示选中状态。 | ||
默认选中 | 「可选中」配置项开启时生效,值为数据的主键值。 | ||
分页设置 | 列表的分页配置,开启后支持翻页。 | ||
加载 | 列表的加载状态 | ||
样式 | 高度 | 详情参见通用属性 | |
外边距 | 详情参见通用属性 | ||
内边距 | 详情参见通用属性 | ||
列表形式 | 列表的展示形式。 | ||
分割线 | 列表模式下生效,数据是否以分割线间隔。 | ||
列数 | 「列表形式」为网格时生效,一行展示的数据个数。 | ||
栅格间距 | 「列表形式」为网格时生效,数据之间的间距。 | ||
空状态文案 | 列表数据源为空时的展示文案 | ||
CSS 样式 | 溢出 | 设置数据溢出列表所需的行为,对应 CSS 属性:overflow,详情参见 mdn 详细说明 | |
背景色 | 设置背景颜色,对应 CSS 属性:background-color,查看 mdn 详细说明 | ||
背景 | 设置各种背景属性,包括 color, image, origin 与 size, repeat 方式等,对应 CSS 属性:background,查看 mdn 详细说明 | ||
背景图片 | 设置一个或者多个背景图像,对应 CSS 属性:background-image,查看 mdn 详细说明 | ||
阴影 | 设置阴影效果,对应 CSS 属性:box-shadow,查看 mdn 详细说明 | ||
上边框 | 设置上边框属性,对应 CSS 属性:border-top, 查看 mdn 详细说明 | ||
下边框 | 设置下边框属性,对应 CSS 属性:border-bottom, 查看 mdn 详细说明 | ||
左边框 | 设置左边框属性,对应 CSS 属性:border-left, 查看 mdn 详细说明 | ||
右边框 | 设置右边框属性,对应 CSS 属性:border-right, 查看 mdn 详细说明 | ||
圆角 | 列表组件的圆角,对应 CSS 属性:border-radius,查看 mdn 详细说明 | ||
边框 | 列表组件的边框,对应 CSS 属性:border, 查看 mdn 详细说明 | ||
选中态背景色 | 「可选中」为 | ||
选中态Hover背景色 | 可选中」为 |
属性与方法
名称 | 类型 | 示例 | 说明 |
名称 | 类型 | 示例 | 说明 |
dataSource | array |
| 当前列表组件的数据源 |
loading | boolean |
| 当前列表组件的加载状态 |
selectedKey | string |
| 当前选中数据项的主键值 |
pagination | object |
| 只读,当前列表组件的分页信息 |
setDataSource | func |
| 设置列表组件的数据为 |
clearDataSource | func |
| 清除列表组件的数据 |
setLoading | func |
| 设置列表组件的加载状态,参数值为 |
clearLoading | func |
| 清除列表组件的加载状态 |
setSelectedKey | func |
| 设置列表组件的选中数据项的主键值为 |
clearSelectedKey | func |
| 清除列表组件的选中数据项的主键值 |
事件回调
配置 | 说明 |
配置 | 说明 |
当点击单元项时将触发的事件 |
- 本页导读
- 简介
- 配置项
- 属性与方法
- 事件回调