From cb84e64aabecf9419d2ffdbf0183a97eca5f98f4 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Fri, 24 Mar 2017 20:52:14 +0800
Subject: [PATCH] update Tree

---
 src/components/tree/node.vue     | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/tree/tree.vue     | 336 ++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 src/components/tree2/index.js    |   2 --
 src/components/tree2/node.vue    | 132 ------------------------------------------------------------------------------------------------------------------------------------
 src/components/tree2/tree.vue    | 113 -----------------------------------------------------------------------------------------------------------------
 src/index.js                     |   2 +-
 src/styles/components/tree2.less | 139 -------------------------------------------------------------------------------------------------------------------------------------------
 7 files changed, 187 insertions(+), 669 deletions(-)
 create mode 100644 src/components/tree/node.vue
 delete mode 100644 src/components/tree2/index.js
 delete mode 100644 src/components/tree2/node.vue
 delete mode 100644 src/components/tree2/tree.vue
 delete mode 100644 src/styles/components/tree2.less

diff --git a/src/components/tree/node.vue b/src/components/tree/node.vue
new file mode 100644
index 0000000..f79b5a9
--- /dev/null
+++ b/src/components/tree/node.vue
@@ -0,0 +1,132 @@
+<template>
+    <transition name="slide-up">
+        <ul :class="classes" v-show="visible">
+            <li>
+                <span :class="arrowClasses" @click="handleExpand">
+                    <Icon type="arrow-right-b"></Icon>
+                </span>
+                <Checkbox
+                    v-if="showCheckbox"
+                    :value="data.checked"
+                    :indeterminate="indeterminate"
+                    :disabled="data.disabled || data.disableCheckbox"
+                    @click.native.prevent="handleCheck"></Checkbox>
+                <span :class="titleClasses" v-html="data.title" @click="handleSelect"></span>
+                <Tree-node
+                    v-for="item in data.children"
+                    :key="item"
+                    :data="item"
+                    :visible="data.expand"
+                    :multiple="multiple"
+                    :show-checkbox="showCheckbox">
+                </Tree-node>
+            </li>
+        </ul>
+    </transition>
+</template>
+<script>
+    import Checkbox from '../checkbox/checkbox.vue';
+    import Emitter from '../../mixins/emitter';
+    import { findComponentsDownward } from '../../utils/assist';
+
+    const prefixCls = 'ivu-tree';
+
+    export default {
+        name: 'TreeNode',
+        mixins: [ Emitter ],
+        components: { Checkbox },
+        props: {
+            data: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            multiple: {
+                type: Boolean,
+                default: false
+            },
+            showCheckbox: {
+                type: Boolean,
+                default: false
+            },
+            visible: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                indeterminate: false,
+                checked: false
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}-children`
+                ]
+            },
+            selectedCls () {
+                return [
+                    {
+                        [`${prefixCls}-node-selected`]: this.data.selected
+                    }
+                ];
+            },
+            arrowClasses () {
+                return [
+                    `${prefixCls}-arrow`,
+                    {
+                        [`${prefixCls}-arrow-disabled`]: this.data.disabled,
+                        [`${prefixCls}-arrow-open`]: this.data.expand,
+                        [`${prefixCls}-arrow-hidden`]: !(this.data.children && this.data.children.length)
+                    }
+                ];
+            },
+            titleClasses () {
+                return [
+                    `${prefixCls}-title`,
+                    {
+                        [`${prefixCls}-title-selected`]: this.data.selected
+                    }
+                ];
+            }
+        },
+        methods: {
+            handleExpand () {
+                if (this.data.disabled) return;
+                this.$set(this.data, 'expand', !this.data.expand);
+            },
+            handleSelect () {
+                if (this.data.disabled) return;
+                if (this.data.selected) {
+                    this.data.selected = false;
+                } else if (this.multiple) {
+                    this.$set(this.data, 'selected', !this.data.selected);
+                } else {
+                    this.dispatch('Tree', 'selected', this.data);
+                }
+                this.dispatch('Tree', 'on-selected');
+            },
+            handleCheck () {
+                if (this.disabled) return;
+                this.data.checked = !this.data.checked;
+                this.dispatch('Tree', 'checked');
+            },
+            setIndeterminate () {
+                this.indeterminate = this.data.checked ? false : findComponentsDownward(this, 'TreeNode').some(node => node.data.checked);
+            }
+        },
+        created () {
+            // created node.vue first, mounted tree.vue second
+            if (!this.data.checked) this.$set(this.data, 'checked', false);
+        },
+        mounted () {
+            this.$on('indeterminate', () => {
+                this.setIndeterminate();
+            })
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/components/tree/tree.vue b/src/components/tree/tree.vue
index c3535b9..e59f22c 100644
--- a/src/components/tree/tree.vue
+++ b/src/components/tree/tree.vue
@@ -1,44 +1,27 @@
 <template>
-    <ul :class="classes">
-        <li v-for="(item, index) in data" :class="itemCls(item)">
-            <span :class="arrowCls(item)" @click="setExpand(item.disabled, index)">
-                <Icon type="arrow-right-b"></Icon>
-            </span>
-            <Checkbox
-                v-if="showCheckbox"
-                :value="item.checked && item.childrenCheckedStatus == 2"
-                :disabled="item.disabled || item.disableCheckbox"
-                :indeterminate="item.checked && item.childrenCheckedStatus == 1"
-                @click.native.prevent="setCheck(item.disabled||item.disableCheckbox, index)"></Checkbox>
-            <a :class="titleCls(item)" @click="setSelect(item.disabled, index)">
-                <span :class="[prefixCls + '-title']" v-html="item.title"></span>
-            </a>
-            <transition name="slide-up">
-                <Tree
-                    v-if="!item.isLeaf"
-                    v-show="item.expand"
-                    :class="expandCls(item)"
-                    :data="item.children"
-                    :name="name+'.'+index"
-                    :multiple="multiple"
-                    :show-checkbox="showCheckbox"></Tree>
-            </transition>
-        </li>
-    </ul>
+    <div :class="prefixCls">
+        <Tree-node
+            v-for="item in currentData"
+            :key="item"
+            :data="item"
+            visible
+            :multiple="multiple"
+            :show-checkbox="showCheckbox">
+        </Tree-node>
+    </div>
 </template>
 <script>
-    import Icon from '../icon/icon.vue';
-    import Checkbox from '../checkbox/checkbox.vue';
-    import { t } from '../../locale';
+    import TreeNode from './node.vue';
+    import { findComponentsDownward } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
-    import { findComponentUpward, findComponentDownward } from '../../utils/assist';
+    import { t } from '../../locale';
 
     const prefixCls = 'ivu-tree';
 
     export default {
         name: 'Tree',
-        components: { Icon, Checkbox },
         mixins: [ Emitter ],
+        components: { TreeNode },
         props: {
             data: {
                 type: Array,
@@ -46,10 +29,6 @@
                     return [];
                 }
             },
-            name: {
-                type: String,
-                default: '0'
-            },
             multiple: {
                 type: Boolean,
                 default: false
@@ -67,274 +46,67 @@
         },
         data () {
             return {
-                prefixCls: prefixCls
+                prefixCls: prefixCls,
+                currentData: this.data
             };
         },
-        computed: {
-            classes () {
-                if (this.name === '0') {
-                    return this.prefixCls;
-                } else {
-                    return `${this.prefixCls}-child-tree`;
-                }
-            }
-        },
         watch: {
-            data () {
-                if (this.name === '0') {
-                    this.setKey();
-                    this.preHandle();
-                }
+            data (val) {
+                
             }
         },
         methods: {
-            itemCls (item) {
-                return [
-                    {
-                        [`${prefixCls}-item-disabled`]: item.disabled
-                    }
-                ];
-            },
-            arrowCls (item) {
-                return [
-                    `${this.prefixCls}-switcher`,
-                    {
-                        [`${this.prefixCls}-switcher-disabled`]: item.disabled,
-                        [`${this.prefixCls}-noline_close`]: !item.expand && !item.isLeaf,
-                        [`${this.prefixCls}-noline_open`]: item.expand && !item.isLeaf,
-                        [`${this.prefixCls}-switcher-noop`]: item.isLeaf
-                    }
-                ];
-            },
-            titleCls (item) {
-                return [
-                    {
-                        [`${this.prefixCls}-node-selected`]: item.selected
-                    }
-                ];
-            },
-            expandCls (item) {
-                return [
-                    {
-                        [`${this.prefixCls}-child-tree-open`]: item.expand
-                    }
-                ];
-            },
-            setKey () {
-                for (let i = 0; i < this.data.length; i++) {
-                    this.data[i].name = `${this.name}.${i}`;
-                }
-            },
-            preHandle () {
-                for (let [i, item] of this.data.entries()) {
-                    if (!item.children || !item.children.length) {
-//                        this.$set(`data[${i}].isLeaf`, true);
-//                        this.$set(`data[${i}].childrenCheckedStatus`, 2);
-                        this.$set(this.data[i], 'isLeaf', true);
-                        this.$set(this.data[i], 'childrenCheckedStatus', 2);
-                        continue;
-                    }
-                    if (item.checked && !item.childrenCheckedStatus) {
-//                        this.$set(`data[${i}].childrenCheckedStatus`, 2);
-                        this.$set(this.data[i], 'childrenCheckedStatus', 2);
-//                        this.$broadcast('parentChecked', true, `${this.name}.${i}`);
-                        this.broadcast('Tree', 'parentChecked', {
-                            status: true,
-                            name: `${this.name}.${i}`
+            getSelectedNodes () {
+                const nodes = findComponentsDownward(this, 'TreeNode');
+                return nodes.filter(node => node.data.selected).map(node => node.data);
+            },
+            updateData () {
+                // init checked status
+                function reverseChecked(data) {
+                    if (data.children) {
+                        let checkedLength = 0;
+                        data.children.forEach(node => {
+                            if (node.children) node = reverseChecked(node);
+                            if (node.checked) checkedLength++;
                         });
+//                        data.checked = checkedLength >= data.children.length;
+                        if (checkedLength >= data.children.length) data.checked = true;
+                        return data;
                     } else {
-                        let status = this.getChildrenCheckedStatus(item.children);
-//                        this.$set(`data[${i}].childrenCheckedStatus`, status);
-                        this.$set(this.data[i], 'childrenCheckedStatus', status);
-//                        if (status !== 0) this.$set(`data[${i}].checked`, true);
-                        if (status !== 0) this.$set(this.data[i], 'checked', true);
+                        return data;
                     }
                 }
-            },
-            setExpand (disabled, index) {
-                if (!disabled) {
-//                    this.$set(`data[${index}].expand`, !this.data[index].expand);
-                    this.$set(this.data[index], 'expand', !this.data[index].expand);
-                }
-            },
-            setSelect (disabled, index) {
-                if (!disabled) {
-                    const selected = !this.data[index].selected;
-                    if (this.multiple || !selected) {
-//                        this.$set(`data[${index}].selected`, selected);
-                        this.$set(this.data[index], 'selected', selected);
-                    } else {
-                        for (let i = 0; i < this.data.length; i++) {
-                            if (i == index) {
-//                                this.$set(`data[${i}].selected`, true);
-                                this.$set(this.data[i], 'selected', true);
-                            } else {
-//                                this.$set(`data[${i}].selected`, false);
-                                this.$set(this.data[i], 'selected', false);
-                            }
-                        }
-                    }
-//                    this.$dispatch('nodeSelected', this, selected);
-                    const parentTree = findComponentUpward(this, 'Tree');
-                    if (parentTree) {
-                        this.dispatch('Tree', 'nodeSelected', {
-                            ori: this,
-                            selected: selected
+                
+                function forwardChecked(data) {
+                    if (data.children) {
+                        data.children.forEach(node => {
+                            if (data.checked) node.checked = true;
+                            if (node.children) node = forwardChecked(node);
                         });
+                        return data;
                     } else {
-                        this.$emit('nodeSelected', {
-                            ori: this,
-                            selected: selected
-                        });
+                        return data;
                     }
                 }
-            },
-            setCheck (disabled, index) {
-                if (disabled) return;
-                const checked = !this.data[index].checked;
-//                this.$set(`data[${index}].checked`, checked);
-                this.$set(this.data[index], 'checked', checked);
-//                this.$set(`data[${index}].childrenCheckedStatus`, checked ? 2 : 0);
-                this.$set(this.data[index], 'childrenCheckedStatus', checked ? 2 : 0);
-//                this.$dispatch('childChecked', this, this.name);
-                this.dispatch('Tree', 'childChecked', {
-                    ori: this,
-                    name: this.name
-                });
-//                this.$broadcast('parentChecked', checked, `${this.name}.${index}`);
-                this.broadcast('Tree', 'parentChecked', {
-                    status: checked,
-                    name: `${this.name}.${index}`
-                });
-            },
-            getNodes (data, opt) {
-                data = data || this.data;
-                let res = [];
-                for (let node of data) {
-                    let tmp = true;
-                    for (let [key, value] of Object.entries(opt)) {
-                        if (node[key] != value) {
-                            tmp = false;
-                            break;
-                        }
-                    }
-                    if (tmp) {
-                        res.push(node);
-                    }
-                    if (node.children && node.children.length) {
-                        res = res.concat(this.getNodes(node.children, opt));
-                    }
-                }
-                return res;
-            },
-            getSelectedNodes () {
-                return this.getNodes(this.data, {selected: true});
-            },
-            getCheckedNodes () {
-                return this.getNodes(this.data, {checked: true, childrenCheckedStatus: 2});
-            },
-            getChildrenCheckedStatus (children) {
-                let checkNum = 0, child_childrenAllChecked = true;
-                for (let child of children) {
-                    if (child.checked) {
-                        checkNum++;
-                    }
-                    if (child.childrenCheckedStatus !== 2) {
-                        child_childrenAllChecked = false;
-                    }
-                }
-                // select all
-                if (checkNum == children.length) {
-                    return child_childrenAllChecked ? 2 : 1;
-                    // select some
-                } else if (checkNum > 0) {
-                    return 1;
-                } else {
-                    return 0;
-                }
+                this.currentData = this.data.map(node => reverseChecked(node)).map(node => forwardChecked(node));
+                this.broadcast('TreeNode', 'indeterminate');
             }
         },
         mounted () {
-            this.setKey();
-            this.preHandle();
+            this.updateData();
 
-//            this.$on('nodeSelected', (ori, selected) => {
-            this.$on('nodeSelected', (params) => {
-                const ori = params.ori;
-                const selected = params.selected;
-
-                if (this.name !== '0') return true;
-                if (!this.multiple && selected) {
-                    if (this !== ori) {
-                        for (let i = 0; i < this.data.length; i++) {
-//                            this.$set(`data[${i}].selected`, false);
-                            this.$set(this.data[i], 'selected', false);
-                        }
-                    }
-//                    this.$broadcast('cancelSelected', ori);
-                    this.broadcast('Tree', 'cancelSelected', ori);
-                }
-                this.$nextTick(() => {
-                    this.$emit('on-select-change', this.getSelectedNodes());
+            this.$on('selected', ori => {
+                const nodes = findComponentsDownward(this, 'TreeNode');
+                nodes.forEach(node => {
+                    this.$set(node.data, 'selected', false);
                 });
+                this.$set(ori, 'selected', true);
             });
-            this.$on('cancelSelected', ori => {
-                console.log(191)
-//                this.$broadcast('cancelSelected', ori);
-                this.broadcast('Tree', 'cancelSelected', ori);
-                if (this !== ori) {
-                    for (let i = 0; i < this.data.length; i++) {
-//                        this.$set(`data[${i}].selected`, false);
-                        this.$set(this.data[i], 'selected', false);
-                    }
-                }
+            this.$on('on-selected', () => {
+                this.$emit('on-select-change', this.getSelectedNodes());
             });
-//            this.$on('parentChecked', (status, name) => {
-            this.$on('parentChecked', (params) => {
-                const status = params.status;
-                const name = params.name;
-
-                if (this.name == name || this.name.startsWith(name + '.')) {
-                    for (let i = 0; i < this.data.length; i++) {
-//                        this.$set(`data[${i}].checked`, status);
-                        this.$set(this.data[i], 'checked', status);
-//                        this.$set(`data[${i}].childrenCheckedStatus`, status ? 2 : 0);
-                        this.$set(this.data[i], 'childrenCheckedStatus', status ? 2 : 0);
-                    }
-//                    this.$broadcast('parentChecked', status, name);
-                    this.broadcast('Tree', 'parentChecked', {
-                        status: status,
-                        name: name
-                    });
-                }
-            });
-//            this.$on('childChecked', (ori, name) => {
-            this.$on('childChecked', (params) => {
-                const ori = params.ori;
-                const name = params.name;
-
-                if (this.name === '0') {
-                    this.$nextTick(() => {
-                        this.$emit('on-check-change', this.getCheckedNodes());
-                    });
-                }
-                if (this === ori) return;
-                for (let [i,item] of this.data.entries()) {
-                    if (this.name + '.' + i == name) {
-                        let temp = this.getChildrenCheckedStatus(item.children);
-                        if (temp != item.childrenCheckedStatus) {
-//                            this.$set(`data[${i}].checked`, !!temp);
-                            this.$set(this.data[i], 'checked', !!temp);
-//                            this.$set(`data[${i}].childrenCheckedStatus`, temp);
-                            this.$set(this.data[i], 'childrenCheckedStatus', temp);
-//                            if (this.name !== '0') this.$dispatch('childChecked', this, this.name);
-                            if (this.name !== '0') this.dispatch('Tree', 'childChecked', {
-                                ori: this,
-                                name: this.name
-                            });
-                        }
-                    }
-                }
+            this.$on('checked', () => {
+                this.updateData();
             });
         }
     };
diff --git a/src/components/tree2/index.js b/src/components/tree2/index.js
deleted file mode 100644
index d1a1ccb..0000000
--- a/src/components/tree2/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import Tree from './tree.vue';
-export default Tree;
\ No newline at end of file
diff --git a/src/components/tree2/node.vue b/src/components/tree2/node.vue
deleted file mode 100644
index f79b5a9..0000000
--- a/src/components/tree2/node.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-    <transition name="slide-up">
-        <ul :class="classes" v-show="visible">
-            <li>
-                <span :class="arrowClasses" @click="handleExpand">
-                    <Icon type="arrow-right-b"></Icon>
-                </span>
-                <Checkbox
-                    v-if="showCheckbox"
-                    :value="data.checked"
-                    :indeterminate="indeterminate"
-                    :disabled="data.disabled || data.disableCheckbox"
-                    @click.native.prevent="handleCheck"></Checkbox>
-                <span :class="titleClasses" v-html="data.title" @click="handleSelect"></span>
-                <Tree-node
-                    v-for="item in data.children"
-                    :key="item"
-                    :data="item"
-                    :visible="data.expand"
-                    :multiple="multiple"
-                    :show-checkbox="showCheckbox">
-                </Tree-node>
-            </li>
-        </ul>
-    </transition>
-</template>
-<script>
-    import Checkbox from '../checkbox/checkbox.vue';
-    import Emitter from '../../mixins/emitter';
-    import { findComponentsDownward } from '../../utils/assist';
-
-    const prefixCls = 'ivu-tree';
-
-    export default {
-        name: 'TreeNode',
-        mixins: [ Emitter ],
-        components: { Checkbox },
-        props: {
-            data: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-            multiple: {
-                type: Boolean,
-                default: false
-            },
-            showCheckbox: {
-                type: Boolean,
-                default: false
-            },
-            visible: {
-                type: Boolean,
-                default: false
-            }
-        },
-        data () {
-            return {
-                prefixCls: prefixCls,
-                indeterminate: false,
-                checked: false
-            };
-        },
-        computed: {
-            classes () {
-                return [
-                    `${prefixCls}-children`
-                ]
-            },
-            selectedCls () {
-                return [
-                    {
-                        [`${prefixCls}-node-selected`]: this.data.selected
-                    }
-                ];
-            },
-            arrowClasses () {
-                return [
-                    `${prefixCls}-arrow`,
-                    {
-                        [`${prefixCls}-arrow-disabled`]: this.data.disabled,
-                        [`${prefixCls}-arrow-open`]: this.data.expand,
-                        [`${prefixCls}-arrow-hidden`]: !(this.data.children && this.data.children.length)
-                    }
-                ];
-            },
-            titleClasses () {
-                return [
-                    `${prefixCls}-title`,
-                    {
-                        [`${prefixCls}-title-selected`]: this.data.selected
-                    }
-                ];
-            }
-        },
-        methods: {
-            handleExpand () {
-                if (this.data.disabled) return;
-                this.$set(this.data, 'expand', !this.data.expand);
-            },
-            handleSelect () {
-                if (this.data.disabled) return;
-                if (this.data.selected) {
-                    this.data.selected = false;
-                } else if (this.multiple) {
-                    this.$set(this.data, 'selected', !this.data.selected);
-                } else {
-                    this.dispatch('Tree', 'selected', this.data);
-                }
-                this.dispatch('Tree', 'on-selected');
-            },
-            handleCheck () {
-                if (this.disabled) return;
-                this.data.checked = !this.data.checked;
-                this.dispatch('Tree', 'checked');
-            },
-            setIndeterminate () {
-                this.indeterminate = this.data.checked ? false : findComponentsDownward(this, 'TreeNode').some(node => node.data.checked);
-            }
-        },
-        created () {
-            // created node.vue first, mounted tree.vue second
-            if (!this.data.checked) this.$set(this.data, 'checked', false);
-        },
-        mounted () {
-            this.$on('indeterminate', () => {
-                this.setIndeterminate();
-            })
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/components/tree2/tree.vue b/src/components/tree2/tree.vue
deleted file mode 100644
index e59f22c..0000000
--- a/src/components/tree2/tree.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <div :class="prefixCls">
-        <Tree-node
-            v-for="item in currentData"
-            :key="item"
-            :data="item"
-            visible
-            :multiple="multiple"
-            :show-checkbox="showCheckbox">
-        </Tree-node>
-    </div>
-</template>
-<script>
-    import TreeNode from './node.vue';
-    import { findComponentsDownward } from '../../utils/assist';
-    import Emitter from '../../mixins/emitter';
-    import { t } from '../../locale';
-
-    const prefixCls = 'ivu-tree';
-
-    export default {
-        name: 'Tree',
-        mixins: [ Emitter ],
-        components: { TreeNode },
-        props: {
-            data: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            multiple: {
-                type: Boolean,
-                default: false
-            },
-            showCheckbox: {
-                type: Boolean,
-                default: false
-            },
-            emptyText: {
-                type: String,
-                default () {
-                    return t('i.tree.emptyText');
-                }
-            }
-        },
-        data () {
-            return {
-                prefixCls: prefixCls,
-                currentData: this.data
-            };
-        },
-        watch: {
-            data (val) {
-                
-            }
-        },
-        methods: {
-            getSelectedNodes () {
-                const nodes = findComponentsDownward(this, 'TreeNode');
-                return nodes.filter(node => node.data.selected).map(node => node.data);
-            },
-            updateData () {
-                // init checked status
-                function reverseChecked(data) {
-                    if (data.children) {
-                        let checkedLength = 0;
-                        data.children.forEach(node => {
-                            if (node.children) node = reverseChecked(node);
-                            if (node.checked) checkedLength++;
-                        });
-//                        data.checked = checkedLength >= data.children.length;
-                        if (checkedLength >= data.children.length) data.checked = true;
-                        return data;
-                    } else {
-                        return data;
-                    }
-                }
-                
-                function forwardChecked(data) {
-                    if (data.children) {
-                        data.children.forEach(node => {
-                            if (data.checked) node.checked = true;
-                            if (node.children) node = forwardChecked(node);
-                        });
-                        return data;
-                    } else {
-                        return data;
-                    }
-                }
-                this.currentData = this.data.map(node => reverseChecked(node)).map(node => forwardChecked(node));
-                this.broadcast('TreeNode', 'indeterminate');
-            }
-        },
-        mounted () {
-            this.updateData();
-
-            this.$on('selected', ori => {
-                const nodes = findComponentsDownward(this, 'TreeNode');
-                nodes.forEach(node => {
-                    this.$set(node.data, 'selected', false);
-                });
-                this.$set(ori, 'selected', true);
-            });
-            this.$on('on-selected', () => {
-                this.$emit('on-select-change', this.getSelectedNodes());
-            });
-            this.$on('checked', () => {
-                this.updateData();
-            });
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 495ec9a..fd9bdad 100644
--- a/src/index.js
+++ b/src/index.js
@@ -40,7 +40,7 @@ import Timeline from './components/timeline';
 import TimePicker from './components/time-picker';
 import Tooltip from './components/tooltip';
 import Transfer from './components/transfer';
-import Tree from './components/tree2';
+import Tree from './components/tree';
 import Upload from './components/upload';
 import { Row, Col } from './components/grid';
 import { Select, Option, OptionGroup } from './components/select';
diff --git a/src/styles/components/tree2.less b/src/styles/components/tree2.less
deleted file mode 100644
index 7e76723..0000000
--- a/src/styles/components/tree2.less
+++ /dev/null
@@ -1,139 +0,0 @@
-@tree-prefix-cls: ~"@{css-prefix}tree";
-
-.@{tree-prefix-cls} {
-    margin: 0;
-    padding: 5px;
-    font-size: @font-size-small;
-    li {
-        padding: 0;
-        margin: 8px 0;
-        list-style: none;
-        white-space: nowrap;
-        outline: 0;
-        a[draggable],
-        a[draggable="true"] {
-            user-select: none;
-            /* Required to make elements draggable in old WebKit */
-            -khtml-user-drag: element;
-            -webkit-user-drag: element;
-        }
-        &.drag-over {
-            > a[draggable] {
-                background-color: @primary-color;
-                color: white;
-                opacity: 0.8;
-            }
-        }
-        &.drag-over-gap-top {
-            > a[draggable] {
-                border-top: 2px @primary-color solid;
-            }
-        }
-        &.drag-over-gap-bottom {
-            > a[draggable] {
-                border-bottom: 2px @primary-color solid;
-            }
-        }
-        &.filter-node {
-            > a {
-                color: @error-color!important;
-                font-weight: bold!important;
-            }
-        }
-        ul {
-            margin: 0;
-            padding: 0 0 0 18px;
-        }
-        a {
-            display: inline-block;
-            margin: 0;
-            padding: 0 4px;
-            border-radius: @btn-border-radius-small;
-            cursor: pointer;
-            text-decoration: none;
-            vertical-align: top;
-            color: @text-color;
-            transition: all @transition-time @ease-in-out;
-            &:hover {
-                background-color: tint(@primary-color, 90%);
-            }
-            &.@{tree-prefix-cls}-node-selected {
-                background-color: tint(@primary-color, 80%);
-            }
-        }
-        .@{checkbox-prefix-cls}-wrapper{
-            margin-right: 4px;
-        }
-        span {
-            &.@{tree-prefix-cls}-switcher,
-            &.@{tree-prefix-cls}-iconEle {
-                display: inline-block;
-                text-align: center;
-                width: 16px;
-                height: 16px;
-                line-height: 16px;
-                margin: 0;
-                vertical-align: middle;
-                border: 0 none;
-                cursor: pointer;
-                outline: none;
-            }
-            //&.@{tree-prefix-cls}-icon_loading {
-            //    &:after {
-            //        display: inline-block;
-            //        //.iconfont-font("\e6a1");
-            //        animation: loadingCircle 1s infinite linear;
-            //        color: @primary-color;
-            //    }
-            //}
-            &.@{tree-prefix-cls}-switcher {
-                i{
-                    transition: all @transition-time @ease-in-out;
-                }
-                &.@{tree-prefix-cls}-switcher-noop {
-                    //display: none;
-                    cursor: auto;
-                    i{
-                        display: none;
-                    }
-                }
-                &.@{tree-prefix-cls}-roots_open,
-                &.@{tree-prefix-cls}-center_open,
-                &.@{tree-prefix-cls}-bottom_open,
-                &.@{tree-prefix-cls}-noline_open {
-                    i {
-                        transform: rotate(90deg);
-                    }
-                }
-                &.@{tree-prefix-cls}-roots_close,
-                &.@{tree-prefix-cls}-center_close,
-                &.@{tree-prefix-cls}-bottom_close,
-                &.@{tree-prefix-cls}-noline_close {
-
-                }
-            }
-        }
-    }
-    &-child-tree {
-        display: none;
-        &-open {
-            display: block;
-        }
-    }
-    &-treenode-disabled {
-        >span,
-        >a,
-        >a span {
-            color: @input-disabled-bg;
-            cursor: not-allowed;
-        }
-    }
-    &-icon__open {
-        margin-right: 2px;
-        vertical-align: top;
-    }
-    &-icon__close {
-        margin-right: 2px;
-        vertical-align: top;
-    }
-}
\ No newline at end of file
--
libgit2 0.21.4