antd TreeSelect树选择的使用

时间:2024-03-15 20:53:41

1.antd官网TreeSelect组件:

https://ant.design/components/tree-select-cn/

2.运行效果图如下:

antd TreeSelect树选择的使用

3.组件引用及数据渲染实现:

(1)组件的导入如下图:

antd TreeSelect树选择的使用

(2)组件的渲染:

antd TreeSelect树选择的使用

下图3-2-1为渲染组件:(相关引用均在下图做了说明)

antd TreeSelect树选择的使用图3-2-1

图3-2-2为渲染父节点:

antd TreeSelect树选择的使用
图3-2-2

图3-2-3为渲染一级子节点:

antd TreeSelect树选择的使用图3-2-3

图3-2-4为渲染二级子节点:

antd TreeSelect树选择的使用图3-2-4

(3)调用方法onChange和onSelect说明:

antd TreeSelect树选择的使用

通过断点的方式发现onSelect方法是先于onChange方法执行的,那在两个方法中是如何获取选中节点的值的呢?看下图:

antd TreeSelect树选择的使用antd TreeSelect树选择的使用

说明:从上图发现onSelect方法是在e.props里面去获取当前被选中节点的值。而onChange方法是extra.triggerNode.props中去获取当前选中节点的值。

参考:

https://ant.design/components/tree-select-cn/#components-tree-select-demo-checkable

相关文章