add tree

Author: tangjinzhou

components/index.js

@@ -100,7 +100,7 @@ export { default as Table } from './table'
 
 export { default as Transfer } from './transfer'
 
-// export { default as Tree } from './tree'
+export { default as Tree } from './tree'
 
 // export { default as TreeSelect } from './tree-select'
 

components/style.js

@@ -40,3 +40,4 @@ import './progress/style'
 import './timeline/style'
 import './input-number/style'
 import './transfer/style'
+import './tree/style'

components/tree/demo/basic-controlled.md

@@ -0,0 +1,93 @@
+<cn>
+#### 受控操作示例
+受控操作示例
+</cn>
+
+<us>
+#### basic controlled example
+basic controlled example
+</us>
+
+```html
+<template>
+  <a-tree
+    checkable
+    @expand="onExpand"
+    :expandedKeys="expandedKeys"
+    :autoExpandParent="autoExpandParent"
+    @check="onCheck"
+    :checkedKeys="checkedKeys"
+    @select="onSelect"
+    :selectedKeys="selectedKeys"
+    :data="treeData"
+  />
+</template>
+<script>
+const treeData = [{
+  title: '0-0',
+  key: '0-0',
+  children: [{
+    title: '0-0-0',
+    key: '0-0-0',
+    children: [
+      { title: '0-0-0-0', key: '0-0-0-0' },
+      { title: '0-0-0-1', key: '0-0-0-1' },
+      { title: '0-0-0-2', key: '0-0-0-2' },
+    ],
+  }, {
+    title: '0-0-1',
+    key: '0-0-1',
+    children: [
+      { title: '0-0-1-0', key: '0-0-1-0' },
+      { title: '0-0-1-1', key: '0-0-1-1' },
+      { title: '0-0-1-2', key: '0-0-1-2' },
+    ],
+  }, {
+    title: '0-0-2',
+    key: '0-0-2',
+  }],
+}, {
+  title: '0-1',
+  key: '0-1',
+  children: [
+    { title: '0-1-0-0', key: '0-1-0-0' },
+    { title: '0-1-0-1', key: '0-1-0-1' },
+    { title: '0-1-0-2', key: '0-1-0-2' },
+  ],
+}, {
+  title: '0-2',
+  key: '0-2',
+}]
+
+export default {
+  data () {
+    return {
+      expandedKeys: ['0-0-0', '0-0-1'],
+      autoExpandParent: true,
+      checkedKeys: ['0-0-0'],
+      selectedKeys: [],
+      treeData,
+    }
+  },
+  methods: {
+    onExpand (expandedKeys) {
+      console.log('onExpand', arguments)
+      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
+      // or, you can remove all expanded children keys.
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },
+    onCheck (checkedKeys) {
+      console.log('onCheck', checkedKeys)
+      this.checkedKeys = checkedKeys
+    },
+    onSelect (selectedKeys, info) {
+      console.log('onSelect', info)
+      this.selectedKeys = selectedKeys
+    },
+  },
+}
+
+</script>
+
+```

components/tree/demo/basic.md

@@ -0,0 +1,64 @@
+<cn>
+#### 基本用法
+最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。
+</cn>
+
+<us>
+#### Basic
+The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
+</us>
+
+```html
+<template>
+  <a-tree
+    checkable
+    :data="treeData"
+    :defaultExpandedKeys="['0-0-0', '0-0-1']"
+    :defaultSelectedKeys="['0-0-0', '0-0-1']"
+    :defaultCheckedKeys="['0-0-0', '0-0-1']"
+    @select="this.onSelect"
+    @check="this.onCheck"
+  >
+    <span slot="title0010" style="color: #1890ff">sss</span>
+  </a-tree>
+</template>
+<script>
+const treeData = [{
+  title: 'parent 1',
+  key: '0-0',
+  children: [{
+    title: 'parent 1-0',
+    key: '0-0-0',
+    disabled: true,
+    children: [
+      { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
+      { title: 'leaf', key: '0-0-0-1' },
+    ],
+  }, {
+    title: 'parent 1-1',
+    key: '0-0-1',
+    children: [
+      { key: '0-0-1-0', slots: { title: 'title0010' }},
+    ],
+  }],
+}]
+
+export default {
+  data () {
+    return {
+      treeData,
+    }
+  },
+  methods: {
+    onSelect (selectedKeys, info) {
+      console.log('selected', selectedKeys, info)
+    },
+    onCheck (checkedKeys, info) {
+      console.log('onCheck', checkedKeys, info)
+    },
+  },
+}
+
+</script>
+
+```

components/tree/demo/customized-icon.md

@@ -0,0 +1,56 @@
+<cn>
+#### 自定义图标
+可以针对不同的节点定制图标。
+</cn>
+
+<us>
+#### Customize Icon
+You can customize icons for different nodes.
+</us>
+
+```html
+<template>
+  <a-tree
+    :data="treeData"
+    showIcon
+    defaultExpandAll
+    :defaultSelectedKeys="['0-0-0']"
+  >
+    <a-icon slot="smile" type="smile-o" />
+    <a-icon slot="meh" type="smile-o" />
+    <template slot="custom" slot-scope="{selected}">
+      <a-icon :type="selected ? 'frown':'frown-o'" />
+    </template>
+  </a-tree>
+</template>
+<script>
+const treeData = [{
+  title: 'parent 1',
+  key: '0-0',
+  slots: {
+    icon: 'smile',
+  },
+  children: [
+    { title: 'leaf', key: '0-0-0', slots: { icon: 'meh' }},
+    { title: 'leaf', key: '0-1-1', scopedSlots: { icon: 'custom' }}],
+}]
+
+export default {
+  data () {
+    return {
+      treeData,
+    }
+  },
+  methods: {
+    onSelect (selectedKeys, info) {
+      console.log('selected', selectedKeys, info)
+    },
+    onCheck (checkedKeys, info) {
+      console.log('onCheck', checkedKeys, info)
+    },
+  },
+}
+
+</script>
+
+```

components/tree/demo/draggable.md

@@ -0,0 +1,112 @@
+<cn>
+#### 拖动示例
+将节点拖拽到其他节点内部或前后。
+</cn>
+
+<us>
+#### draggable
+Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.
+</us>
+
+```html
+<template>
+  <a-tree
+    class="draggable-tree"
+    :defaultExpandedKeys="expandedKeys"
+    draggable
+    @dragenter="onDragEnter"
+    @drop="onDrop"
+    :data="gData"
+  />
+</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({ title: key, key })
+    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)
+export default {
+  data () {
+    return {
+      gData,
+      expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
+    }
+  },
+  methods: {
+    onDragEnter (info) {
+      console.log(info)
+    // expandedKeys 需要受控时设置
+    // this.expandedKeys = info.expandedKeys
+    },
+    onDrop (info) {
+      console.log(info)
+      const dropKey = info.node.eventKey
+      const dragKey = info.dragNode.eventKey
+      const dropPos = info.node.pos.split('-')
+      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
+      // const dragNodesKeys = info.dragNodesKeys;
+      const loop = (data, key, callback) => {
+        data.forEach((item, index, arr) => {
+          if (item.key === key) {
+            return callback(item, index, arr)
+          }
+          if (item.children) {
+            return loop(item.children, key, callback)
+          }
+        })
+      }
+      const data = [...this.gData]
+      let dragObj
+      loop(data, dragKey, (item, index, arr) => {
+        arr.splice(index, 1)
+        dragObj = item
+      })
+      if (info.dropToGap) {
+        let ar
+        let i
+        loop(data, dropKey, (item, index, arr) => {
+          ar = arr
+          i = index
+        })
+        if (dropPosition === -1) {
+          ar.splice(i, 0, dragObj)
+        } else {
+          ar.splice(i + 1, 0, dragObj)
+        }
+      } else {
+        loop(data, dropKey, (item) => {
+          item.children = item.children || []
+          // where to insert 示例添加到尾部，可以是随意位置
+          item.children.push(dragObj)
+        })
+      }
+      this.gData = data
+    },
+  },
+}
+</script>
+
+```

components/tree/demo/dynamic.md

@@ -0,0 +1,18 @@
+<cn>
+#### 异步数据加载
+点击展开节点，动态加载数据。
+</cn>
+
+<us>
+#### load data asynchronously
+To load data asynchronously when click to expand a treeNode.
+</us>
+
+```html
+<template>
+
+</template>
+<script>
+
+</script>
+```