List 列表 #

List 组件用于展示一组数据，适用于展示类似于列表的内容. 并且支持拖拽排序功能

获取组件 #

演示 #

默认 #

列表尺寸 #

边框 #

悬停效果 #

可排序 #

必须给 List.Item 传入 index (组内唯一)

分组排序 #

每个 collection 的位置独立， 必须给 List.Item 传入 index (组内唯一)

固定项 #

基于分组排序，列表中的项在排序时固定位置

带自定义项的列表 #

没有分割线 #

Props #

<List> #

属性名称	类型 (默认值)	描述	版本
autoScroll	boolean (true)	溢出表格自动滚动
bordered	boolean	是否需要边框
divider	boolean	是否显示分割线
hover	boolean	是否有鼠标悬停效果
onSort	(payload: Payload) => void	排序结束回调
onSortEnd	(payload: Payload) => void	排序结束回调
onSortMove	(payload: Payload) => void	排序移动元素时的回调
onSortStart	(payload: Payload) => void	排序开始回调
pressDelay	number (0)	排序触发延迟
size	'lg' | 'md' | 'sm' | 'xs' (md)	列表大小
sortable	boolean	是否可以排序
transitionDuration	number (300)	排序动画持续时间

<List.Item> #

Payload #

interface Payload {
  collection: number | string;
  node: HTMLElement;
  newIndex: number;
  oldIndex: number;
}