---
title: EC_DeviceTree - 设备树
nav:
  title: 业务组件
  path: /extend-components
group:
  path: /
---

# EC-DeviceTree 设备树

基础业务组件

- 允许单设备选择
- 允许多设备选择
- 允许搜索设备树

## 何时使用

- 在设备树选择时。

## 代码演示

<code src="./demos/Basic.tsx">

## API

api 参考 Antd Tree 组件 https://ant.design/components/tree-cn/

| 参数          | 说明                             | 类型                  | 默认值   |
| ------------- | -------------------------------- | --------------------- | -------- |
| deviceTypes   | 设备类型, 多种设备逗号隔开       | string                | 二供泵房 |
| userAccessor  | 是否启用设备权限过滤             | boolean               | false    |
| getChild      | 是否查询子设备                   | boolean               | false    |
| sortFields    | 设备排序字段, 设备台账表中的字段 | string                | -        |
| direction     | 设备排序方向, asc/desc           | string                | -        |
| classField    | 分组字段，设备台账表中的字段     | string                | -        |
| customerName  | 服务参数                         | string                | -        |
| onSelect      | 选择回调                         | function(data: []){ } | -        |
| onCheck       | 多选回调                         | function(data: []){ } | -        |
| setDeviceList | 返回设备回调                     | function(data: []){ } | -        |
| setSearchStr  | 返回搜索字符串                   | function(val: ''){ }  | -        |
| selectable    | 'Antd-Tree 属性'                 | function(data: []){ } | -        |
| checkable     | 'Antd-Tree 属性'                 | function(data: []){ } | -        |
| keepChecked   | 是否选择第一个                   | boolean               | false    |

## 补充说明

- keepChecked: boolean, 搜索之后保持之前的选中数据
- 第一次加载数据后默认勾选第一条
- 再次加载数据后保持之前的选中数据，不默认勾选第一条
- 选中数据之后和之前的做合并处理，key 也做合并处理做保留
- 潜在问题 1: 取消选中后，区分取消选中的数据 和 之前保留但不再树中的数据(利用 onCheck 会保留多余的 key)

- singleType: boolean, 是否只能选单一类型设备, 其他类型设备会被禁用

- 单选及多选说明：
- 仅多选: 传递 checkable=true, selectable=false, 触发 onCheck
- 仅单选: 传递 checkable=false, selectable=true, 触发 onSelect
- 混合: 传递 checkable=true, selectable=true, 触发 onCheck(混合模式表现：点击前面多选框可多选设备, 点击设备名称可直接切换单选到该设备)
