diff --git a/examples/routers/tree.vue b/examples/routers/tree.vue index af32364..6bbc059 100644 --- a/examples/routers/tree.vue +++ b/examples/routers/tree.vue @@ -1,6 +1,6 @@ <template> <div> - <Tree :data="baseData" show-checkbox multiple></Tree> + <Tree :data="baseData" :load-data="loadData" show-checkbox multiple></Tree> <Button @click="handleAdd">add</Button> <Button @click="handleUpdate">update</Button> </div> @@ -16,18 +16,9 @@ children: [ { title: 'parent 1-0', - expand: true, - disabled: true, - children: [ - { - title: 'leaf', - disableCheckbox: true - }, - { - title: 'leaf', - checked: false - } - ] + expand: false, + children: [], + loading: false }, { title: 'parent 1-1', @@ -71,6 +62,25 @@ }, cc () { console.log(99) + }, + loadData (item, callback) { + item.loading = true; + setTimeout(() => { + item.children = [ + { + title: 'children-1', + loading: false, + children: [] + }, + { + title: 'children-2', + loading: false, + children: [] + } + ]; + item.loading = false; + callback(); + }, 2000); } } } diff --git a/src/components/tree/node.vue b/src/components/tree/node.vue index 2844420..8a7e789 100644 --- a/src/components/tree/node.vue +++ b/src/components/tree/node.vue @@ -3,7 +3,8 @@ <ul :class="classes"> <li> <span :class="arrowClasses" @click="handleExpand"> - <Icon type="arrow-right-b"></Icon> + <Icon v-if="showArrow" type="arrow-right-b"></Icon> + <Icon v-if="showLoading" type="load-c" class="ivu-load-loop"></Icon> </span> <Checkbox v-if="showCheckbox" @@ -31,6 +32,7 @@ import Render from '../base/render'; import CollapseTransition from '../base/collapse-transition'; import Emitter from '../../mixins/emitter'; + import { findComponentUpward } from '../../utils/assist'; const prefixCls = 'ivu-tree'; @@ -77,8 +79,7 @@ `${prefixCls}-arrow`, { [`${prefixCls}-arrow-disabled`]: this.data.disabled, - [`${prefixCls}-arrow-open`]: this.data.expand, - [`${prefixCls}-arrow-hidden`]: !(this.data.children && this.data.children.length) + [`${prefixCls}-arrow-open`]: this.data.expand } ]; }, @@ -89,13 +90,36 @@ [`${prefixCls}-title-selected`]: this.data.selected } ]; + }, + showArrow () { + return (this.data.children && this.data.children.length) || ('loading' in this.data && !this.data.loading); + }, + showLoading () { + return 'loading' in this.data && this.data.loading; } }, methods: { handleExpand () { - if (this.data.disabled) return; - this.$set(this.data, 'expand', !this.data.expand); - this.dispatch('Tree', 'toggle-expand', this.data); + const item = this.data; + if (item.disabled) return; + + // async loading + if (item.loading !== undefined && !item.children.length) { + const tree = findComponentUpward(this, 'Tree'); + if (tree && tree.loadData) { + tree.loadData(item, () => { + if (item.children.length) { + this.handleExpand(item); + } + }); + return; + } + } + + if (item.children && item.children.length) { + this.$set(this.data, 'expand', !this.data.expand); + this.dispatch('Tree', 'toggle-expand', this.data); + } }, handleSelect () { if (this.data.disabled) return; diff --git a/src/components/tree/tree.vue b/src/components/tree/tree.vue index 6a885bc..6662131 100644 --- a/src/components/tree/tree.vue +++ b/src/components/tree/tree.vue @@ -39,6 +39,9 @@ }, emptyText: { type: String + }, + loadData: { + type: Function } }, data () { diff --git a/src/styles/components/tree.less b/src/styles/components/tree.less index 0d9a37e..8dfa016 100644 --- a/src/styles/components/tree.less +++ b/src/styles/components/tree.less @@ -49,12 +49,12 @@ transform: rotate(90deg); } } - &-hidden{ - cursor: auto; - i{ - display: none; - } - } + //&-hidden{ + // cursor: auto; + // i{ + // display: none; + // } + //} &-disabled{ cursor: @cursor-disabled; } -- libgit2 0.21.4