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);
});
}