添加树选择组件

src/App.js

@@ -16,6 +16,7 @@ class App extends React.Component {
         '表格',
         '表单',
         '级联树',
+        '树选择',
         '二级菜单',
         '二级菜单-1',
         '三级菜单',

src/route/index.js

@@ -63,6 +63,13 @@ export const RouteConfig = [
     role: '级联树',
     icon: 'apartment'
   },
+  {
+    name: '树选择',
+    path: '/treeSelect',
+    component: lazy(() => import('../views/test/treeSelect')),
+    role: '树选择',
+    icon: 'form'
+  },
   {
     name: '二级菜单',
     role: '二级菜单',

src/views/test/tables/index.jsx

@@ -6,7 +6,7 @@ const columns = [
     title: 'Name',
     dataIndex: 'name',
     key: 'name',
-    render: text => <a>{text}</a>
+    render: text => <span>{text}</span>
   },
   {
     title: 'Age',

src/views/test/treeSelect/index.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react'
+import { TreeSelect } from 'antd'
+
+// export default class TreeSelectDemo extends React.Component {
+
+// }
+const initTreeData = [
+  { id: 1, pId: 0, value: '1', title: 'Expand to load', selectable: false },
+  { id: 2, pId: 0, value: '2', title: 'Expand to load' },
+  { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true }
+]
+
+function TreeSelectDemo() {
+  const [treeValue, setTreeValue] = useState(undefined)
+  const [treeData, setTreeData] = useState(initTreeData)
+
+  function getTreeNode(parentId, isLeaf) {
+    const random = Math.random()
+      .toString(36)
+      .substring(2, 6)
+    return {
+      id: random,
+      pId: parentId,
+      value: random,
+      title: isLeaf ? 'Tree Node' : 'Expand to load',
+      isLeaf,
+      selectable: isLeaf
+    }
+  }
+
+  function handeChange(value) {
+    setTreeValue(value)
+  }
+
+  function onLoadData(treeNode) {
+    return new Promise(resolve => {
+      const { id } = treeNode.props
+      const arr = treeData.concat([
+        getTreeNode(id, false),
+        getTreeNode(id, true)
+      ])
+      setTreeData(arr)
+      resolve()
+    })
+  }
+
+  return (
+    <div style={{
+      width: '220px'
+    }}>
+      <TreeSelect
+        treeDataSimpleMode
+        style={{ width: '100%' }}
+        value={treeValue}
+        dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
+        placeholder={'请选择'}
+        onChange={handeChange}
+        loadData={onLoadData}
+        treeData={treeData}
+      ></TreeSelect>
+    </div>
+  )
+}
+
+export default TreeSelectDemo