other / mew-iview

Commit 153422758177103595309671e9d619547eadb00e

Authored by Aresn
Committed by GitHub
2 parents 8551f527 0985c87b

Merge pull request #3236 from vanppo/2.0 

Add new props 'childrenKey' to Tree component
Showing 2 changed files with 29 additions and 15 deletions   Show diff stats
Inline Side-by-side
src/components/tree/node.vue
  Show/Hide comments   View file @1534227
@@ -17,11 +17,12 @@ @@ -17,11 +17,12 @@
17 <span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span> 17 <span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span>
18 <Tree-node 18 <Tree-node
19 v-if="data.expand" 19 v-if="data.expand"
20 - v-for="(item, i) in data.children" 20 + v-for="(item, i) in children"
21 :key="i" 21 :key="i"
22 :data="item" 22 :data="item"
23 :multiple="multiple" 23 :multiple="multiple"
24 - :show-checkbox="showCheckbox"> 24 + :show-checkbox="showCheckbox"
  25 + :children-key="childrenKey">
25 </Tree-node> 26 </Tree-node>
26 </li> 27 </li>
27 </ul> 28 </ul>
@@ -52,6 +53,10 @@ @@ -52,6 +53,10 @@
52 type: Boolean, 53 type: Boolean,
53 default: false 54 default: false
54 }, 55 },
  56 + childrenKey: {
  57 + type: String,
  58 + default: 'children'
  59 + },
55 showCheckbox: { 60 showCheckbox: {
56 type: Boolean, 61 type: Boolean,
57 default: false 62 default: false
@@ -93,7 +98,7 @@ @@ -93,7 +98,7 @@
93 ]; 98 ];
94 }, 99 },
95 showArrow () { 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 showLoading () { 103 showLoading () {
99 return 'loading' in this.data && this.data.loading; 104 return 'loading' in this.data && this.data.loading;
@@ -118,6 +123,9 @@ @@ -118,6 +123,9 @@
118 } else { 123 } else {
119 return []; 124 return [];
120 } 125 }
  126 + },
  127 + children () {
  128 + return this.data[this.childrenKey];
121 } 129 }
122 }, 130 },
123 methods: { 131 methods: {
@@ -126,14 +134,14 @@ @@ -126,14 +134,14 @@
126 if (item.disabled) return; 134 if (item.disabled) return;
127 135
128 // async loading 136 // async loading
129 - if (item.children.length === 0) { 137 + if (item[this.childrenKey].length === 0) {
130 const tree = findComponentUpward(this, 'Tree'); 138 const tree = findComponentUpward(this, 'Tree');
131 if (tree && tree.loadData) { 139 if (tree && tree.loadData) {
132 this.$set(this.data, 'loading', true); 140 this.$set(this.data, 'loading', true);
133 tree.loadData(item, children => { 141 tree.loadData(item, children => {
134 this.$set(this.data, 'loading', false); 142 this.$set(this.data, 'loading', false);
135 if (children.length) { 143 if (children.length) {
136 - this.$set(this.data, 'children', children); 144 + this.$set(this.data, this.childrenKey, children);
137 this.$nextTick(() => this.handleExpand()); 145 this.$nextTick(() => this.handleExpand());
138 } 146 }
139 }); 147 });
@@ -141,7 +149,7 @@ @@ -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 this.$set(this.data, 'expand', !this.data.expand); 153 this.$set(this.data, 'expand', !this.data.expand);
146 this.dispatch('Tree', 'toggle-expand', this.data); 154 this.dispatch('Tree', 'toggle-expand', this.data);
147 } 155 }
src/components/tree/tree.vue
  Show/Hide comments   View file @1534227
@@ -6,7 +6,8 @@ @@ -6,7 +6,8 @@
6 :data="item" 6 :data="item"
7 visible 7 visible
8 :multiple="multiple" 8 :multiple="multiple"
9 - :show-checkbox="showCheckbox"> 9 + :show-checkbox="showCheckbox"
  10 + :children-key="childrenKey">
10 </Tree-node> 11 </Tree-node>
11 <div :class="[prefixCls + '-empty']" v-if="!stateTree.length">{{ localeEmptyText }}</div> 12 <div :class="[prefixCls + '-empty']" v-if="!stateTree.length">{{ localeEmptyText }}</div>
12 </div> 13 </div>
@@ -40,6 +41,10 @@ @@ -40,6 +41,10 @@
40 emptyText: { 41 emptyText: {
41 type: String 42 type: String
42 }, 43 },
  44 + childrenKey: {
  45 + type: String,
  46 + default: 'children'
  47 + },
43 loadData: { 48 loadData: {
44 type: Function 49 type: Function
45 }, 50 },
@@ -76,18 +81,19 @@ @@ -76,18 +81,19 @@
76 methods: { 81 methods: {
77 compileFlatState () { // so we have always a relation parent/children of each node 82 compileFlatState () { // so we have always a relation parent/children of each node
78 let keyCounter = 0; 83 let keyCounter = 0;
  84 + let childrenKey = this.childrenKey;
79 const flatTree = []; 85 const flatTree = [];
80 function flattenChildren(node, parent) { 86 function flattenChildren(node, parent) {
81 node.nodeKey = keyCounter++; 87 node.nodeKey = keyCounter++;
82 flatTree[node.nodeKey] = { node: node, nodeKey: node.nodeKey }; 88 flatTree[node.nodeKey] = { node: node, nodeKey: node.nodeKey };
83 if (typeof parent != 'undefined') { 89 if (typeof parent != 'undefined') {
84 flatTree[node.nodeKey].parent = parent.nodeKey; 90 flatTree[node.nodeKey].parent = parent.nodeKey;
85 - flatTree[parent.nodeKey].children.push(node.nodeKey); 91 + flatTree[parent.nodeKey][childrenKey].push(node.nodeKey);
86 } 92 }
87 93
88 - if (node.children) {  
89 - flatTree[node.nodeKey].children = [];  
90 - node.children.forEach(child => flattenChildren(child, node)); 94 + if (node[childrenKey]) {
  95 + flatTree[node.nodeKey][childrenKey] = [];
  96 + node[childrenKey].forEach(child => flattenChildren(child, node));
91 } 97 }
92 } 98 }
93 this.stateTree.forEach(rootNode => { 99 this.stateTree.forEach(rootNode => {
@@ -104,11 +110,11 @@ @@ -104,11 +110,11 @@
104 if (node.checked == parent.checked && node.indeterminate == parent.indeterminate) return; // no need to update upwards 110 if (node.checked == parent.checked && node.indeterminate == parent.indeterminate) return; // no need to update upwards
105 111
106 if (node.checked == true) { 112 if (node.checked == true) {
107 - this.$set(parent, 'checked', parent.children.every(node => node.checked)); 113 + this.$set(parent, 'checked', parent[this.childrenKey].every(node => node.checked));
108 this.$set(parent, 'indeterminate', !parent.checked); 114 this.$set(parent, 'indeterminate', !parent.checked);
109 } else { 115 } else {
110 this.$set(parent, 'checked', false); 116 this.$set(parent, 'checked', false);
111 - this.$set(parent, 'indeterminate', parent.children.some(node => node.checked || node.indeterminate)); 117 + this.$set(parent, 'indeterminate', parent[this.childrenKey].some(node => node.checked || node.indeterminate));
112 } 118 }
113 this.updateTreeUp(parentKey); 119 this.updateTreeUp(parentKey);
114 }, 120 },
@@ -139,8 +145,8 @@ @@ -139,8 +145,8 @@
139 for (let key in changes) { 145 for (let key in changes) {
140 this.$set(node, key, changes[key]); 146 this.$set(node, key, changes[key]);
141 } 147 }
142 - if (node.children) {  
143 - node.children.forEach(child => { 148 + if (node[this.childrenKey]) {
  149 + node[this.childrenKey].forEach(child => {
144 this.updateTreeDown(child, changes); 150 this.updateTreeDown(child, changes);
145 }); 151 });
146 } 152 }