@hi-ui/tree-select
TypeScript icon, indicating that this package has built-in type declarations

4.2.1 • Public • Published

TreeSelect 树形多项选择器

一种接收树形数据结构的选择器,为用户提供复杂数据展示的能力

何时使用

  • 选择部门的组织结构、部门等
  • 选择商品目录等

使用示例

Props

参数 说明 类型 可选值 默认值
data 展示数据 DataItem [] - -
fieldNames 设置 data 中 id, title, disabled, children 对应的 key (3.0 新增) object - { title: 'title', id: 'id',disabled:'disabled', children: 'children'}
checkedMode 数据回显模式 string ALL: 所有被选中节点,不区分父子节点
PARENT: 当所有子节点被选中时将只保留父节点
CHILD:仅显示子节点
ALL
disabled 是否禁用 boolean true | false false
defaultExpandAll 是否默认展开所有树节点 boolean true | false false
expandedIds 展开的节点(受控) ReactText[] - -
defaultExpandedIds 默认展开的节点(非受控) ReactText[] - -
defaultValue 默认选中项 (非受控) ReactText - -
value 默认选中项 (受控) ReactText - -
displayRender 自定义渲染 Input 中展示内容 (valueItem: checkedNode) => ReactNode - -
placeholder 输入框占位 string - 请选择
searchPlaceholder 搜索输入框占位 string - 搜索
loadingContent 加载中文字提示 string - 数据加载中...
searchMode 节点搜索模式 string 'highlight' | 'filter' -
dataSource 异步加载数据 (key: string) => DataSource | DataSource | Promise - -
emptyContent 没有选项时的提示 ReactNode - 无内容
optionWidth 自定义下拉选项宽度 number -
overlayClassName 下拉根元素的类名称 string - -
popper 自定义控制弹出层 popper 行为 Omit<PopperProps, 'visible' | 'attachEl'> - -

Events

名称 说明 类型 参数 返回值
onChange 选中时触发 (checkedIds: ReactText[], checkedNodes: DataItem[], targetNode: DataItem, shouldChecked: boolean) => void checkedIds: 选中项 ID 集合
checkedNodes: 选中项数据项集合
targetNode: 当前操作节点
shouldChecked: 是否要被选中
-

DataItem

参数 说明 类型 可选值 默认值
title 下拉选项标题 string - -
id 下拉选项唯一 id string | number - -
disabled 是否禁用 boolean - false
children 子级数据 DataItem[] - -

DataSource

参数 说明 类型 可选值 默认值
url 请求的 url string - -
type 请求方法 string get | post get
data post 请求时请求体参数 object - -
params url 查询参数 object - -
headers 请求头 object - -
mode 请求模式 string 'same-origin' | 'cors' | 'no-cors' | 'navigate' 'same-origin'
transformResponse 成功时的回调,用于对数据进行预处理 (response: object) => DataItem[] - -

CHANGELOG

从原 TreeSelect 组件抽离单选模式出来,作为为单独单选的 TreeSelect 组件。

参数 变更类型 变更内容 解决的问题
propName feature | deprecated | update 变更了什么 之前是什么样子,解决什么问题
---- ---- ---- ----
value update 类型 DataItem[] | string[] | string -> <string | number> 对于表单控件 id 值的控制,均使用 React.ReactText(即 string 和 number 都支持)
defaultValue update 类型 DataItem[] | string[] | string -> <string | number> 对于表单控件 id 值的控制,均使用 React.ReactText(即 string 和 number 都支持)
id update 类型 string -> string | number 对于表单控件 id 值的控制,均使用 React.ReactText(即 string 和 number 都支持)
bordered deprecated 字段 bordered -> appearance 对于 Picker 类型的组件,统一使用 appearance 设置外形(线\面\无边框)值
searchPlaceholder feature - Picker 类型组件统一支持
loadingContent feature - Picker 类型组件统一支持,适配新 UI
popper feature - Picker 类型组件统一支持,聚合管理。比如: placement,之前有的加了有的没加
render feature - 统一支持自定义渲染每一项
virtual feature - 支持虚拟列表
height feature - 支持虚拟列表
itemHeight feature - 支持虚拟列表
type deprecated - 拆分单选多选组件单独维护
autoload deprecated - 页面级首次渲染执行数据加载操作,取消内置
mode deprecated - 面包屑模式可以使用 checkCascade 组件替代,交互形式更为优雅。
appearance feature - 统一支持:线性\面性\无边框
valueRender update valueRender(items: DataItem[]) -> displayRender(item: DataItem) 统一字段命名及其含义
expandedIds update 字段:expandIds -> expandedIds 统一字段命名及其含义
defaultExpandedIds update defaultExpandIds -> defaultExpandedIds 统一字段命名及其含义
onChange update 类型:(checkedIds | checkedId, checkedNodes | checkedNode, currentNode) => void -> (checkedIds: ReactText[], checkedNodes: DataItem[], targetNode: DataItem, shouldChecked: boolean) => void 1. 移除数组结构,方便用户获取;2. 暴露 shouldSelected 执行相应拦截之类的操作; 3. 点击清空时触发 onChange

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
4.2.1-alpha.00alpha
4.0.11-beta.00beta
4.0.0-beta.500feature
4.2.14latest

Version History

VersionDownloads (Last 7 Days)Published
4.2.14
4.2.1-alpha.00
4.2.01
4.1.50
4.1.5-alpha.00
4.1.41
4.1.30
4.1.20
4.1.10
4.1.01
4.0.11-beta.00
4.0.100
4.0.90
4.0.80
4.0.70
4.0.60
4.0.50
4.0.40
4.0.30
4.0.20
4.0.10
4.0.00
4.0.0-beta.500
4.0.0-beta.490
4.0.0-beta.480
4.0.0-beta.470
4.0.0-beta.460
4.0.0-beta.450
4.0.0-beta.440
4.0.0-beta.430
4.0.0-beta.420
4.0.0-beta.410
4.0.0-beta.402
4.0.0-beta.390
4.0.0-beta.380
4.0.0-beta.370
4.0.0-beta.360
4.0.0-beta.351
4.0.0-beta.340
4.0.0-beta.331
4.0.0-beta.320
4.0.0-beta.310
4.0.0-beta.300
4.0.0-beta.290
4.0.0-beta.280
4.0.0-beta.270
4.0.0-beta.260
4.0.0-beta.250
4.0.0-beta.240
4.0.0-beta.230
4.0.0-beta.220
4.0.0-beta.210
4.0.0-beta.200
4.0.0-beta.190
4.0.0-beta.180
4.0.0-beta.170
4.0.0-beta.160
4.0.0-beta.150
4.0.0-beta.140
4.0.0-beta.130
4.0.0-beta.120
4.0.0-beta.110
4.0.0-beta.100
4.0.0-beta.90
4.0.0-beta.80
4.0.0-beta.70
4.0.0-beta.61
4.0.0-beta.50
4.0.0-beta.40
4.0.0-beta.30
4.0.0-beta.20
4.0.0-beta.10
4.0.0-beta.00
4.0.0-alpha.320
4.0.0-alpha.310
4.0.0-alpha.300
4.0.0-alpha.290
4.0.0-alpha.281
4.0.0-alpha.270
4.0.0-alpha.260
4.0.0-alpha.250
4.0.0-alpha.240
4.0.0-alpha.230
4.0.0-alpha.220
4.0.0-alpha.210
4.0.0-alpha.200
4.0.0-alpha.190
4.0.0-alpha.180
4.0.0-alpha.170
4.0.0-alpha.160
4.0.0-alpha.150
4.0.0-alpha.140
4.0.0-alpha.130
4.0.0-alpha.120
4.0.0-alpha.110
4.0.0-alpha.100
4.0.0-alpha.90
4.0.0-alpha.70
4.0.0-alpha.60
4.0.0-alpha.50
4.0.0-alpha.40
4.0.0-alpha.30

Package Sidebar

Install

npm i @hi-ui/tree-select

Weekly Downloads

13

Version

4.2.1

License

MIT

Unpacked Size

54 kB

Total Files

13

Last publish

Collaborators

  • sivan
  • solarjoker