---
group:
  title: 通用组件
  order: 2
title: StandardList
order: 8
toc: content
---


# StandardList 列表


## 代码演示
<code title="基础用法"  src="../../src/StandardList/demos/basic.tsx" compact="true" ></code>

<code title="多选" description="配置checkable可显示Checkbox"  src="../../src/StandardList/demos/checkable.tsx" compact="true" ></code>

<code title="拖动排序" description="配置 `sortable='true'` ，结合 `onChange` 更新数据源。如果自定义使用[@dnd-kit](https://docs.dndkit.cn/api-wen-dang/draggable)则不能与`sortable='true'`同时使用"  src="../../src/StandardList/demos/dragSorting.tsx" compact="true" ></code>

> @dnd-kit：[文档](https://docs.dndkit.cn/api-wen-dang/draggable) [示例](https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/core-draggable-hooks-usedraggable--basic-setup)

## API
| 参数                        | 说明                          | 类型                                                                              | 默认值 |
|---------------------------|-----------------------------|---------------------------------------------------------------------------------|-------|
| options                   | 列表数组                        | `Array `                                                                        | |
| labelRender               | 自定义选项文本显示                   | `(option, info: {  }) => React.ReactNode `                                      | |
| onSelect                  | 点击选项                        | `(keys, option, extraInfo: {currentData, multiData, selected, checked}) =>void` | |
| selectKeys                | 选中节点                        | `Array`                                                                         | |
| multiple                  | 支持选择多个节点                    | `Boolean`                                                                       | |
| checkable`v4.1.25`        | `multiple`模式下，可显示复选框        | `Boolean`                                                                       | - |
| disabled`v4.1.26`         | `multiple`模式下，禁用所有节点选择操作    | `Boolean`                                                                       | - |
| footer                    | 底部扩展                        | ReactNode                                                                       | - |
| buttonGroup               | 右侧配置按钮组                     | Array                                                                           | - |
| buttonGroupConfig         | 按钮组配置项                      | Object                                                                          | - |
| code                      | 按钮组codes                    | Array                                                                           | - |
| permissionCode            | 按钮组权限值                      | Array                                                                           | - |
| fullHeight                | 主内容高度是否100%                 | `Boolean`                                                                       | - |
| emptyDescription          | 无数据时显示文本                    | `ReactNode`                                                                     | - |
| sortable `v4.1.27`        | 是否开启排序                      | `Boolean`                                                                       |`false` |
| onChange`v4.1.27`         | 排序拖动后触发事件(sortable=true下使用） | `(sortedOptions, dragItemEvent)=> void`                                         | |
| handleRender`v4.1.27`     | 自定义排序区块图标或结构                | `ReactNode`                                                                     |`<HolderOutlined/>` |
| loading`v4.1.29`          | 加载状态                        | `Boolean`                                                                       | |
| dndContextConfig`v4.1.49` | DndContext的扩展配置             | `Object`                                                                        | |
| loadingConfig `v6.0.0`    | 内容区域`<Spin>`自定义扩展配置，用法参考官方 | Object    | - |