Commit 2be2b974166ce08c16615e8634236b2e1d6f5019
Committed by
GitHub
GitHub
Merge pull request #2184 from SergioCrisostomo/fix-tree-examples
fix dom rendering when adding new nodes in example
Showing
3 changed files
with
28 additions
and
22 deletions
Show diff stats
examples/routers/tree.vue
| ... | ... | @@ -34,11 +34,11 @@ |
| 34 | 34 | size: 'small' |
| 35 | 35 | }, |
| 36 | 36 | on: { |
| 37 | - click: () => { | |
| 38 | - this.cc(); | |
| 37 | + click: ({target}) => { | |
| 38 | + this.logger(target.textContent); | |
| 39 | 39 | } |
| 40 | 40 | } |
| 41 | - }, '我是按钮') | |
| 41 | + }, 'I\'m a button!'); | |
| 42 | 42 | } |
| 43 | 43 | } |
| 44 | 44 | ] |
| ... | ... | @@ -46,7 +46,7 @@ |
| 46 | 46 | ] |
| 47 | 47 | } |
| 48 | 48 | ] |
| 49 | - } | |
| 49 | + }; | |
| 50 | 50 | }, |
| 51 | 51 | methods: { |
| 52 | 52 | handleAdd () { |
| ... | ... | @@ -55,18 +55,20 @@ |
| 55 | 55 | title: 'test name', |
| 56 | 56 | checked: true |
| 57 | 57 | } |
| 58 | - ) | |
| 58 | + ); | |
| 59 | 59 | }, |
| 60 | 60 | handleUpdate () { |
| 61 | - this.$set(this.baseData[0].children[0].children[1], 'checked', true); | |
| 61 | + const child = this.baseData[0].children[0].children[1]; | |
| 62 | + // console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child)); | |
| 63 | + if (!child) return this.$Message.error('Node is async and is not loaded yet'); | |
| 64 | + else this.$set(child, 'checked', true); | |
| 62 | 65 | }, |
| 63 | - cc () { | |
| 64 | - console.log(99) | |
| 66 | + logger (txt) { | |
| 67 | + console.log(txt); | |
| 65 | 68 | }, |
| 66 | 69 | loadData (item, callback) { |
| 67 | - item.loading = true; | |
| 68 | 70 | setTimeout(() => { |
| 69 | - item.children = [ | |
| 71 | + callback([ | |
| 70 | 72 | { |
| 71 | 73 | title: 'children-1', |
| 72 | 74 | loading: false, |
| ... | ... | @@ -77,11 +79,9 @@ |
| 77 | 79 | loading: false, |
| 78 | 80 | children: [] |
| 79 | 81 | } |
| 80 | - ]; | |
| 81 | - item.loading = false; | |
| 82 | - callback(); | |
| 82 | + ]); | |
| 83 | 83 | }, 2000); |
| 84 | 84 | } |
| 85 | 85 | } |
| 86 | - } | |
| 86 | + }; | |
| 87 | 87 | </script> | ... | ... |
src/components/tree/node.vue
| ... | ... | @@ -16,8 +16,8 @@ |
| 16 | 16 | <span v-else :class="titleClasses" v-html="data.title" @click="handleSelect"></span> |
| 17 | 17 | <Tree-node |
| 18 | 18 | v-if="data.expand" |
| 19 | - v-for="item in data.children" | |
| 20 | - :key="item.nodeKey" | |
| 19 | + v-for="(item, i) in data.children" | |
| 20 | + :key="i" | |
| 21 | 21 | :data="item" |
| 22 | 22 | :multiple="multiple" |
| 23 | 23 | :show-checkbox="showCheckbox"> |
| ... | ... | @@ -61,6 +61,9 @@ |
| 61 | 61 | prefixCls: prefixCls |
| 62 | 62 | }; |
| 63 | 63 | }, |
| 64 | + watch: { | |
| 65 | + | |
| 66 | + }, | |
| 64 | 67 | computed: { |
| 65 | 68 | classes () { |
| 66 | 69 | return [ |
| ... | ... | @@ -104,12 +107,15 @@ |
| 104 | 107 | if (item.disabled) return; |
| 105 | 108 | |
| 106 | 109 | // async loading |
| 107 | - if (item.loading !== undefined && !item.children.length) { | |
| 110 | + if (item.children.length === 0) { | |
| 108 | 111 | const tree = findComponentUpward(this, 'Tree'); |
| 109 | 112 | if (tree && tree.loadData) { |
| 110 | - tree.loadData(item, () => { | |
| 111 | - if (item.children.length) { | |
| 112 | - this.handleExpand(item); | |
| 113 | + this.$set(this.data, 'loading', true); | |
| 114 | + tree.loadData(item, children => { | |
| 115 | + this.$set(this.data, 'loading', false); | |
| 116 | + if (children.length) { | |
| 117 | + this.$set(this.data, 'children', children); | |
| 118 | + this.$nextTick(() => this.handleExpand()); | |
| 113 | 119 | } |
| 114 | 120 | }); |
| 115 | 121 | return; | ... | ... |