add tree doc

Author: tangjinzhou

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"
-    :checkedKeys="checkedKeys"
+    v-model="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>
+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>
+
 ```