1.antd官网TreeSelect组件:
https://ant.design/components/tree-select-cn/
2.运行效果图如下:
3.组件引用及数据渲染实现:
(1)组件的导入如下图:
(2)组件的渲染:
下图3-2-1为渲染组件:(相关引用均在下图做了说明)
图3-2-1
图3-2-2为渲染父节点:
图3-2-2
图3-2-3为渲染一级子节点:
图3-2-3
图3-2-4为渲染二级子节点:
图3-2-4
(3)调用方法onChange和onSelect说明:
通过断点的方式发现onSelect方法是先于onChange方法执行的,那在两个方法中是如何获取选中节点的值的呢?看下图:
说明:从上图发现onSelect方法是在e.props里面去获取当前被选中节点的值。而onChange方法是extra.triggerNode.props中去获取当前选中节点的值。
参考:
https://ant.design/components/tree-select-cn/#components-tree-select-demo-checkable