add tree doc

components/input/Search.jsx

@@ -84,6 +84,7 @@ export default {
       },
       attrs: this.$attrs,
       on: {
+        ...this.$listeners,
         pressEnter: this.onSearch,
       },
     }

components/table/index.en-US.md

@@ -101,7 +101,6 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| className | className of this column | string | - |
 | colSpan | Span of this column's title | number |  |
 | dataIndex | Display field of the data record, could be set like `a.b.c` | string | - |
 | defaultSortOrder | Default order of sorted values: `'ascend'` `'descend'` `null` | string | - |

components/table/index.zh-CN.md

@@ -35,7 +35,6 @@ const columns = [{
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| className | 列的 className | string | - |
 | bordered | 是否展示外边框和列边框 | boolean | false |
 | columns | 表格列的配置描述，具体项见下表 | array | - |
 | components | 覆盖默认的 table 元素 | object | - |

components/tree/demo/basic-controlled.md

@@ -15,11 +15,10 @@ basic controlled example
     @expand="onExpand"
     :expandedKeys="expandedKeys"
     :autoExpandParent="autoExpandParent"
-    @check="onCheck"
+    v-model="checkedKeys"
-    :checkedKeys="checkedKeys"
     @select="onSelect"
     :selectedKeys="selectedKeys"
-    :data="treeData"
+    :treeNodes="treeData"
   />
 </template>
 <script>
@@ -69,6 +68,11 @@ export default {
       treeData,
     }
   },
+  watch: {
+    checkedKeys(val) {
+      console.log('onCheck', val)
+    }
+  },
   methods: {
     onExpand (expandedKeys) {
       console.log('onExpand', arguments)

components/tree/demo/basic.md

@@ -12,7 +12,7 @@ The most basic usage, tell you how to use checkable, selectable, disabled, defau
 <template>
   <a-tree
     checkable
-    :data="treeData"
+    :treeNodes="treeData"
     :defaultExpandedKeys="['0-0-0', '0-0-1']"
     :defaultSelectedKeys="['0-0-0', '0-0-1']"
     :defaultCheckedKeys="['0-0-0', '0-0-1']"

components/tree/demo/customized-icon.md

@@ -11,7 +11,7 @@ You can customize icons for different nodes.
 ```html
 <template>
   <a-tree
-    :data="treeData"
+    :treeNodes="treeData"
     showIcon
     defaultExpandAll
     :defaultSelectedKeys="['0-0-0']"

components/tree/demo/draggable.md

@@ -16,7 +16,7 @@ Drag treeNode to insert after the other treeNode or insert into the other parent
     draggable
     @dragenter="onDragEnter"
     @drop="onDrop"
-    :data="gData"
+    :treeNodes="gData"
   />
 </template>
 

components/tree/demo/dynamic.md

@@ -10,9 +10,42 @@ To load data asynchronously when click to expand a treeNode.
 
 ```html
 <template>
-
+  <a-tree
+    :loadData="onLoadData"
+    :treeNodes="treeData"
+  />
 </template>
-<script>
 
+<script>
+export default {
+  data () {
+    return {
+      treeData: [
+        { title: 'Expand to load', key: '0' },
+        { title: 'Expand to load', key: '1' },
+        { title: 'Tree Node', key: '2', isLeaf: true },
+      ],
+    }
+  },
+  methods: {
+    onLoadData (treeNode) {
+      return new Promise((resolve) => {
+        if (treeNode.dataRef.children) {
+          resolve()
+          return
+        }
+        setTimeout(() => {
+          treeNode.dataRef.children = [
+            { title: 'Child Node', key: `${treeNode.eventKey}-0` },
+            { title: 'Child Node', key: `${treeNode.eventKey}-1` },
+          ]
+          this.treeData = [...this.treeData]
+          resolve()
+        }, 100)
+      })
+    },
+  },
+}
 </script>
+
 ```

components/tree/demo/index.vue

@@ -0,0 +1,54 @@
+<script>
+import BasicControlled from './basic-controlled'
+import Basic from './basic'
+import CustomizedIcon from './customized-icon'
+import Draggable from './draggable'
+import Dynamic from './dynamic'
+import Line from './line'
+import Search from './search'
+
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# 树形控件
+  ## 何时使用
+
+文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用\`树控件\`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
+
+        ## 代码演示`,
+  us: `# Tree
+  ## When To Use
+
+Almost anything can be represented in a tree structure. 
+Examples include directories, organization hierarchies, biological classifications, countries, etc. The \`Tree\` component is a way of representing the hierarchical relationship between these things. You can also  expand, collapse, and select a treeNode within a \`Tree\`.
+## Examples
+  `,
+}
+export default {
+  category: 'Components',
+  type: 'Data Display',
+  title: 'Tree',
+  subtitle: '树形控件',
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <BasicControlled/>
+        <Basic/>
+        <CustomizedIcon/>
+        <Draggable/>
+        <Dynamic/>
+        <Line/>
+        <Search/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>

components/tree/demo/search.md

@@ -10,9 +10,112 @@ Searchable Tree.
 
 ```html
 <template>
-
+  <div>
+    <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
+    <a-tree
+      @expand="onExpand"
+      :expandedKeys="expandedKeys"
+      :autoExpandParent="autoExpandParent"
+      :treeNodes="gData"
+    >
+      <template slot="title" slot-scope="{key}">
+        <span v-if="key.indexOf(searchValue) > -1">
+          {{key.substr(0, key.indexOf(searchValue))}}
+          <span style="color: #f50">{{searchValue}}</span>
+          {{key.substr(key.indexOf(searchValue) + searchValue.length)}}
+        </span>
+        <span v-else>{{key}}</span>
+      </template>
+    </a-tree>
+  </div>
 </template>
-<script>
 
+<script>
+const x = 3
+const y = 2
+const z = 1
+const gData = []
+
+const generateData = (_level, _preKey, _tns) => {
+  const preKey = _preKey || '0'
+  const tns = _tns || gData
+
+  const children = []
+  for (let i = 0; i < x; i++) {
+    const key = `${preKey}-${i}`
+    tns.push({ key, scopedSlots: { title: 'title' }})
+    if (i < y) {
+      children.push(key)
+    }
+  }
+  if (_level < 0) {
+    return tns
+  }
+  const level = _level - 1
+  children.forEach((key, index) => {
+    tns[index].children = []
+    return generateData(level, key, tns[index].children)
+  })
+}
+generateData(z)
+
+const dataList = []
+const generateList = (data) => {
+  for (let i = 0; i < data.length; i++) {
+    const node = data[i]
+    const key = node.key
+    dataList.push({ key, title: key })
+    if (node.children) {
+      generateList(node.children, node.key)
+    }
+  }
+}
+generateList(gData)
+
+const getParentKey = (key, tree) => {
+  let parentKey
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i]
+    if (node.children) {
+      if (node.children.some(item => item.key === key)) {
+        parentKey = node.key
+      } else if (getParentKey(key, node.children)) {
+        parentKey = getParentKey(key, node.children)
+      }
+    }
+  }
+  return parentKey
+}
+export default {
+  data () {
+    return {
+      expandedKeys: [],
+      searchValue: '',
+      autoExpandParent: true,
+      gData,
+    }
+  },
+  methods: {
+    onExpand  (expandedKeys) {
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },
+    onChange (e) {
+      const value = e.target.value
+      const expandedKeys = dataList.map((item) => {
+        if (item.key.indexOf(value) > -1) {
+          return getParentKey(item.key, gData)
+        }
+        return null
+      }).filter((item, i, self) => item && self.indexOf(item) === i)
+      Object.assign(this, {
+        expandedKeys,
+        searchValue: value,
+        autoExpandParent: true,
+      })
+    },
+  },
+}
 </script>
+
 ```

components/tree/demo/test.vue

@@ -1,39 +0,0 @@
-<template>
-  <a-tree
-    :loadData="onLoadData"
-    :data="treeData"
-  />
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      treeData: [
-        { title: 'Expand to load', key: '0' },
-        { title: 'Expand to load', key: '1' },
-        { title: 'Tree Node', key: '2', isLeaf: true },
-      ],
-    }
-  },
-  methods: {
-    onLoadData (treeNode) {
-      console.log(treeNode.dataRef)
-      return new Promise((resolve) => {
-        if (treeNode.dataRef.children) {
-          resolve()
-          return
-        }
-        setTimeout(() => {
-          treeNode.dataRef.children = [
-            { title: 'Child Node', key: `${treeNode.eventKey}-0` },
-            { title: 'Child Node', key: `${treeNode.eventKey}-1` },
-          ]
-          this.treeData = [...this.treeData]
-          resolve()
-        }, 1000)
-      })
-    },
-  },
-}
-</script>

components/tree/index.en-US.md

@@ -1,12 +1,3 @@
----
-category: Components
-type: Data Display
-title: Tree
----
-
-## When To Use
-
-Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The `Tree` component is a way of representing the hierarchical relationship between these things. You can also  expand, collapse, and select a treeNode within a `Tree`.
 
 ## API
 
@@ -14,9 +5,10 @@ Almost anything can be represented in a tree structure. Examples include directo
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
+| treeNodes | treeNode of tree | array | - |
 | autoExpandParent | Whether to automatically expand a parent treeNode | boolean | true |
 | checkable | Adds a `Checkbox` before the treeNodes | boolean | false |
-| checkedKeys | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other. | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
+| checkedKeys(v-model) | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other. | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
 | checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false |
 | defaultCheckedKeys | Specifies the keys of the default checked treeNodes | string\[] | \[] |
 | defaultExpandAll | Whether to expand all treeNodes by default | boolean | false |
@@ -25,46 +17,45 @@ Almost anything can be represented in a tree structure. Examples include directo
 | defaultSelectedKeys | Specifies the keys of the default selected treeNodes | string\[] | \[] |
 | disabled | whether disabled the tree | bool | false |
 | draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false |
-| expandedKeys | (Controlled) Specifies the keys of the expanded treeNodes | string\[] | \[] |
+| expandedKeys(.sync) | (Controlled) Specifies the keys of the expanded treeNodes | string\[] | \[] |
 | filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - |
 | loadData | Load data asynchronously | function(node) | - |
 | multiple | Allows selecting multiple treeNodes | boolean | false |
-| selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - |
+| selectedKeys(.sync) | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - |
 | showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |
 | showLine | Shows a connecting line | boolean | false |
-| onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
+
-| onDragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - |
+### Events
-| onDragEnter | Callback function for when the onDragEnter event occurs | function({event, node,  expandedKeys}) | - |
+| Events Name | Description | Arguments |
-| onDragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - |
+| --- | --- | --- |
-| onDragOver | Callback function for when the onDragOver event occurs | function({event, node}) | - |
+| check | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
-| onDragStart | Callback function for when the onDragStart event occurs | function({event, node}) | - |
+| dragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - |
-| onDrop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |
+| dragEnter | Callback function for when the onDragEnter event occurs | function({event, node,  expandedKeys}) | - |
-| onExpand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | - |
+| dragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - |
-| onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - |
+| dragOver | Callback function for when the onDragOver event occurs | function({event, node}) | - |
-| onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
+| dragStart | Callback function for when the onDragStart event occurs | function({event, node}) | - |
+| drop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |
+| expand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | - |
+| rightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - |
+| select | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
 
 ### TreeNode props
 
+
+One of the Tree `treeNode` prop for describing the tree's node, TreeNode has the same API.
+
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
+| class | className | string | - |
+| style | style | string\|object | - |
 | disableCheckbox | Disables the checkbox of the treeNode | boolean | false |
 | disabled | Disables the treeNode | boolean | false |
-| icon | customize icon. When you pass component, whose render will receive full TreeNode props as component props | element/Function(props):ReactNode | - |
+| icon | customize icon. When you pass component, whose render will receive full TreeNode props as component props | slot\|slot-scope | - |
 | isLeaf | Determines if this is a leaf node(effective when `loadData` is specified) | boolean | false |
 | key | Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree! | string | internal calculated position of treeNode |
 | selectable | Set whether the treeNode can be selected | boolean | true |
-| title | Title | string\|ReactNode | '---' |
+| title | Title | string\|slot\|slot-scope | '---' |
+| slots | When using treeNodes, you can use this property to configure the properties that support the slot, such as `slots: { title: 'XXX'}` | object | - |
+| scopedSlots | When using treeNodes, you can use this property to configure the properties that support the slot-scope, such as `scopedSlots: { title: 'XXX'}` | object | - |
+| on | When using treeNodes, you can use this property to configure the events, such as `on: { click: () => {}}` | object | - |
 
-## Note
-
-Before `3.4.0`:
-The number of treeNodes can be very large, but when `checkable=true`,
-it will increase the compute time. So, we cache some calculations (e.g. `this.treeNodesStates`)
-to avoid double computing. But, this brings some restrictions.
-**When you load treeNodes asynchronously, you should render tree like this**:
-
-```jsx
-{this.state.treeData.length
-  ? <Tree>{this.state.treeData.map(data => <TreeNode />)}</Tree>
-  : 'loading tree'}
-```

components/tree/index.jsx

@@ -30,7 +30,7 @@ import { initDefaultProps, getOptionProps } from '../_util/props-util'
 // }
 
 export const TreeProps = () => ({
-  data: PropTypes.array,
+  treeNodes: PropTypes.array,
   showLine: PropTypes.bool,
   /** 是否支持多选 */
   multiple: PropTypes.boolean,
@@ -127,7 +127,9 @@ export default {
             icon: restProps.icon ||
               $slots[slots.icon] ||
               ($scopedSlots[scopedSlots.icon] && $scopedSlots[scopedSlots.icon]),
-            title: restProps.title || $slots[slots.title],
+            title: restProps.title ||
+             $slots[slots.title] ||
+             ($scopedSlots[scopedSlots.title] && $scopedSlots[scopedSlots.title])(item),
             dataRef: item,
           },
           on,
@@ -149,7 +151,7 @@ export default {
 
   render () {
     const props = getOptionProps(this)
-    const { prefixCls, checkable, data, ...restProps } = props
+    const { prefixCls, checkable, treeNodes, ...restProps } = props
     const { handelSelect, handleCheck, handleExpand, renderTreeNodes } = this
     const vcTreeProps = {
       props: {
@@ -166,7 +168,7 @@ export default {
     }
     return (
       <VcTree {...vcTreeProps}>
-        {data ? renderTreeNodes(data) : this.$slots.default}
+        {treeNodes ? renderTreeNodes(treeNodes) : this.$slots.default}
       </VcTree>
     )
   },

components/tree/index.zh-CN.md

@@ -1,13 +1,3 @@
----
-category: Components
-type: Data Display
-title: Tree
-subtitle: 树形控件
----
-
-## 何时使用
-
-文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
 
 ## API
 
@@ -15,9 +5,10 @@ subtitle: 树形控件
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| treeNodes | 节点的配置描述，具体项见下表 | array | -- |
 | autoExpandParent | 是否自动展开父节点 | boolean | true |
 | checkable | 节点前添加 Checkbox 复选框 | boolean | false |
-| checkedKeys | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
+| checkedKeys(v-model) | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
 | checkStrictly | checkable状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false |
 | defaultCheckedKeys | 默认选中复选框的树节点 | string\[] | \[] |
 | defaultExpandAll | 默认展开所有树节点 | boolean | false |
@@ -25,44 +16,49 @@ subtitle: 树形控件
 | defaultExpandParent | 默认展开父节点 | bool | true |
 | defaultSelectedKeys | 默认选中的树节点 | string\[] | \[] |
 | disabled | 将树禁用 | bool | false |
-| draggable | 设置节点可拖拽（IE>8） | boolean | false |
+| draggable | 设置节点可拖拽 | boolean | false |
-| expandedKeys | （受控）展开指定的树节点 | string\[] | \[] |
+| expandedKeys(.sync) | （受控）展开指定的树节点 | string\[] | \[] |
 | filterTreeNode | 按需筛选树节点（高亮），返回true | function(node) | - |
 | loadData | 异步加载数据 | function(node) | - |
 | multiple | 支持点选多个节点（节点本身） | boolean | false |
-| selectedKeys | （受控）设置选中的树节点 | string\[] | - |
+| selectedKeys(.sync) | （受控）设置选中的树节点 | string\[] | - |
 | showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |
 | showLine | 是否展示连接线 | boolean | false |
-| onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
+
-| onDragEnd | dragend 触发时调用 | function({event, node}) | - |
+
-| onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - |
+### 事件
-| onDragLeave | dragleave 触发时调用 | function({event, node}) | - |
+
-| onDragOver | dragover 触发时调用 | function({event, node}) | - |
+| 事件名称 | 说明 | 回调参数 |
-| onDragStart | 开始拖拽时调用 | function({event, node}) | - |
+| --- | --- | --- |
-| onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - |
+| check | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
-| onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - |
+| dragEnd | dragend 触发时调用 | function({event, node}) | - |
-| onRightClick | 响应右键点击 | function({event, node}) | - |
+| dragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - |
-| onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
+| dragLeave | dragleave 触发时调用 | function({event, node}) | - |
+| dragOver | dragover 触发时调用 | function({event, node}) | - |
+| dragStart | 开始拖拽时调用 | function({event, node}) | - |
+| drop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - |
+| expand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - |
+| rightClick | 响应右键点击 | function({event, node}) | - |
+| select | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
 
 ### TreeNode props
 
+结点描述数据对象，是 treeNodes 中的一项，TreeNode 使用相同的 API。
+
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| class | 节点的 class | string | - |
+| style | 节点的 style | string\|object | - |
 | disableCheckbox | 禁掉 checkbox | boolean | false |
 | disabled | 禁掉响应 | boolean | false |
-| icon | 自定义图标。可接收组件，props 为当前节点 props | element/Function(props):ReactNode | - |
+| icon | 自定义图标。可接收组件，props 为当前节点 props | slot\|slot-scope | - |
 | isLeaf | 设置为叶子节点(设置了`loadData`时有效) | boolean | false |
 | key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | string | 内部计算出的节点位置 |
 | selectable | 设置节点是否可被选中 | boolean | true |
-| title | 标题 | string\|ReactNode | '---' |
+| title | 标题 | string\|slot\|slot-scope | '---' |
+| slots | 使用treeNodes时，可以通过该属性配置支持slot的属性，如 `slots: { title: 'XXX'}` | object | - |
+| scopedSlots | 使用columns时，可以通过该属性配置支持slot-scope的属性，如 `scopedSlots: { title: 'XXX'}` | object | - |
+| on | 事件对象，仅在treeNodes使用方式中生效，如`{click: () => {}}` | object | '---' |
 
-## 注意
 
-在 `3.4.0` 之前：
-树节点可以有很多，但在设置`checkable`时，将会花费更多的计算时间，因此我们缓存了一些计算结果（`this.treeNodesStates`）来复用，避免多次重复计算，以此提高性能。但这也带来了一些限制，当你异步加载树节点时，你需要这样渲染树：
 
-```jsx
-{this.state.treeData.length
-  ? <Tree>{this.state.treeData.map(data => <TreeNode />)}</Tree>
-  : 'loading tree'}
-```

site/demo.js

@@ -42,3 +42,4 @@ export { default as table } from 'antd/table/demo/index.vue'
 export { default as inputNumber } from 'antd/input-number/demo/index.vue'
 export { default as transfer } from 'antd/transfer/demo/index.vue'
 export { default as upload } from 'antd/upload/demo/index.vue'
+export { default as tree } from 'antd/tree/demo/index.vue'

site/routes.js

@@ -3,7 +3,7 @@ import Layout from './components/layout.vue'
 const AsyncTestComp = () => {
   const d = window.location.hash.replace('#', '')
   return {
-    component: import(`../components/slider/demo/${d}`),
+    component: import(`../components/tree/demo/${d}`),
   }
 }