List 列表
用于展示一组数据
<List>列表<List.Item>列表元素
获取组件
import { List } from 'rsuite';演示
默认
列表尺寸
边框
悬停效果
可排序
必须给 List.Item 传入
index(组内唯一)
分组排序
每个
collection的位置独立， 必须给 List.Item 传入index(组内唯一)
自定义列表
Props
<List>
| 属性名称 | 类型 (默认值) |
描述 |
|---|---|---|
| bordered | boolean | 是否需要边框 |
| hover | boolean | 是否有鼠标悬停效果 |
| sortable | boolean | 是否可以排序 |
| size | enums: 'lg','md','sm' md |
列表大小 |
| autoScroll | boolean true |
溢出表格自动滚动 |
| pressDelay | number 0 |
排序触发延迟 |
| transitionDuration | number 300 |
排序动画持续时间 |
| onSortStart | (payload:{ collection: number/string, node:HTMLElement, newIndex: number, oldIndex: number }) => void | 排序开始回调 |
| onSortMove | (payload:{ collection: number/string, node:HTMLElement, newIndex: number, oldIndex: number }) => void | 排序移动元素时的回调 |
| onSortEnd | (payload:{ collection: number/string, node:HTMLElement, newIndex: number, oldIndex: number }) => void | 排序结束回调 |
| onSort | (payload:{ collection: number/string, node:HTMLElement, newIndex: number, oldIndex: number }) => void | 排序结束回调 |
<List.Item>
| 属性名称 | 类型 (默认值) |
描述 |
|---|---|---|
| index | number(排序时必选) | 元素索引(同组内必须唯一) |
| collection | number/string 0 |
元素组号 |
| disabled | boolean | 禁止直接改变该元素的排序 |