chenhaodong / mew-iview

Commit 56c7cc0efc34361b99d1ca30698045e746547a81

Authored by vanppo
1 parent a0f48947

Add new props 'childrenKey' to Tree component

Showing 2 changed files with 20 additions and 7 deletions   Show diff stats
Inline Side-by-side
src/components/tree/node.vue
  Show/Hide comments   View file @56c7cc0
... ... @@ -17,11 +17,12 @@
17 17 <span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span>
18 18 <Tree-node
19 19 v-if="data.expand"
20   - v-for="(item, i) in data.children"
  20 + v-for="(item, i) in children"
21 21 :key="i"
22 22 :data="item"
23 23 :multiple="multiple"
24   - :show-checkbox="showCheckbox">
  24 + :show-checkbox="showCheckbox"
  25 + :children-key="childrenKey">
25 26 </Tree-node>
26 27 </li>
27 28 </ul>
... ... @@ -52,6 +53,10 @@
52 53 type: Boolean,
53 54 default: false
54 55 },
  56 + childrenKey: {
  57 + type: String,
  58 + default: 'children'
  59 + },
55 60 showCheckbox: {
56 61 type: Boolean,
57 62 default: false
... ... @@ -93,7 +98,7 @@
93 98 ];
94 99 },
95 100 showArrow () {
96   - return (this.data.children && this.data.children.length) || ('loading' in this.data && !this.data.loading);
  101 + return (this.data[this.childrenKey] && this.data[this.childrenKey].length) || ('loading' in this.data && !this.data.loading);
97 102 },
98 103 showLoading () {
99 104 return 'loading' in this.data && this.data.loading;
... ... @@ -118,6 +123,9 @@
118 123 } else {
119 124 return [];
120 125 }
  126 + },
  127 + children () {
  128 + return this.data[this.childrenKey];
121 129 }
122 130 },
123 131 methods: {
... ... @@ -126,14 +134,14 @@
126 134 if (item.disabled) return;
127 135  
128 136 // async loading
129   - if (item.children.length === 0) {
  137 + if (item[this.childrenKey].length === 0) {
130 138 const tree = findComponentUpward(this, 'Tree');
131 139 if (tree && tree.loadData) {
132 140 this.$set(this.data, 'loading', true);
133 141 tree.loadData(item, children => {
134 142 this.$set(this.data, 'loading', false);
135 143 if (children.length) {
136   - this.$set(this.data, 'children', children);
  144 + this.$set(this.data, this.childrenKey, children);
137 145 this.$nextTick(() => this.handleExpand());
138 146 }
139 147 });
... ... @@ -141,7 +149,7 @@
141 149 }
142 150 }
143 151  
144   - if (item.children && item.children.length) {
  152 + if (item[this.childrenKey] && item[this.childrenKey].length) {
145 153 this.$set(this.data, 'expand', !this.data.expand);
146 154 this.dispatch('Tree', 'toggle-expand', this.data);
147 155 }
... ...
src/components/tree/tree.vue
  Show/Hide comments   View file @56c7cc0
... ... @@ -6,7 +6,8 @@
6 6 :data="item"
7 7 visible
8 8 :multiple="multiple"
9   - :show-checkbox="showCheckbox">
  9 + :show-checkbox="showCheckbox"
  10 + :children-key="childrenKey">
10 11 </Tree-node>
11 12 <div :class="[prefixCls + '-empty']" v-if="!stateTree.length">{{ localeEmptyText }}</div>
12 13 </div>
... ... @@ -40,6 +41,10 @@
40 41 emptyText: {
41 42 type: String
42 43 },
  44 + childrenKey: {
  45 + type: String,
  46 + default: 'children'
  47 + },
43 48 loadData: {
44 49 type: Function
45 50 },
... ...