diff --git a/src/components/tree/node.vue b/src/components/tree/node.vue index 21e6620d..2029bba9 100644 --- a/src/components/tree/node.vue +++ b/src/components/tree/node.vue @@ -17,11 +17,12 @@ {{ data.title }} + :show-checkbox="showCheckbox" + :children-key="childrenKey"> @@ -52,6 +53,10 @@ type: Boolean, default: false }, + childrenKey: { + type: String, + default: 'children' + }, showCheckbox: { type: Boolean, default: false @@ -93,7 +98,7 @@ ]; }, showArrow () { - return (this.data.children && this.data.children.length) || ('loading' in this.data && !this.data.loading); + return (this.data[this.childrenKey] && this.data[this.childrenKey].length) || ('loading' in this.data && !this.data.loading); }, showLoading () { return 'loading' in this.data && this.data.loading; @@ -118,6 +123,9 @@ } else { return []; } + }, + children () { + return this.data[this.childrenKey]; } }, methods: { @@ -126,14 +134,14 @@ if (item.disabled) return; // async loading - if (item.children.length === 0) { + if (item[this.childrenKey].length === 0) { const tree = findComponentUpward(this, 'Tree'); if (tree && tree.loadData) { this.$set(this.data, 'loading', true); tree.loadData(item, children => { this.$set(this.data, 'loading', false); if (children.length) { - this.$set(this.data, 'children', children); + this.$set(this.data, this.childrenKey, children); this.$nextTick(() => this.handleExpand()); } }); @@ -141,7 +149,7 @@ } } - if (item.children && item.children.length) { + if (item[this.childrenKey] && item[this.childrenKey].length) { this.$set(this.data, 'expand', !this.data.expand); this.dispatch('Tree', 'toggle-expand', this.data); } diff --git a/src/components/tree/tree.vue b/src/components/tree/tree.vue index 1da8e2f1..fd4f9545 100644 --- a/src/components/tree/tree.vue +++ b/src/components/tree/tree.vue @@ -6,7 +6,8 @@ :data="item" visible :multiple="multiple" - :show-checkbox="showCheckbox"> + :show-checkbox="showCheckbox" + :children-key="childrenKey">
{{ localeEmptyText }}
@@ -40,6 +41,10 @@ emptyText: { type: String }, + childrenKey: { + type: String, + default: 'children' + }, loadData: { type: Function }, @@ -76,18 +81,19 @@ methods: { compileFlatState () { // so we have always a relation parent/children of each node let keyCounter = 0; + let childrenKey = this.childrenKey; const flatTree = []; function flattenChildren(node, parent) { node.nodeKey = keyCounter++; flatTree[node.nodeKey] = { node: node, nodeKey: node.nodeKey }; if (typeof parent != 'undefined') { flatTree[node.nodeKey].parent = parent.nodeKey; - flatTree[parent.nodeKey].children.push(node.nodeKey); + flatTree[parent.nodeKey][childrenKey].push(node.nodeKey); } - if (node.children) { - flatTree[node.nodeKey].children = []; - node.children.forEach(child => flattenChildren(child, node)); + if (node[childrenKey]) { + flatTree[node.nodeKey][childrenKey] = []; + node[childrenKey].forEach(child => flattenChildren(child, node)); } } this.stateTree.forEach(rootNode => { @@ -104,11 +110,11 @@ if (node.checked == parent.checked && node.indeterminate == parent.indeterminate) return; // no need to update upwards if (node.checked == true) { - this.$set(parent, 'checked', parent.children.every(node => node.checked)); + this.$set(parent, 'checked', parent[this.childrenKey].every(node => node.checked)); this.$set(parent, 'indeterminate', !parent.checked); } else { this.$set(parent, 'checked', false); - this.$set(parent, 'indeterminate', parent.children.some(node => node.checked || node.indeterminate)); + this.$set(parent, 'indeterminate', parent[this.childrenKey].some(node => node.checked || node.indeterminate)); } this.updateTreeUp(parentKey); }, @@ -139,8 +145,8 @@ for (let key in changes) { this.$set(node, key, changes[key]); } - if (node.children) { - node.children.forEach(child => { + if (node[this.childrenKey]) { + node[this.childrenKey].forEach(child => { this.updateTreeDown(child, changes); }); }