update Tree
This commit is contained in:
parent
cb84e64aab
commit
3c145e6ffe
2 changed files with 19 additions and 16 deletions
|
@ -66,7 +66,7 @@
|
||||||
classes () {
|
classes () {
|
||||||
return [
|
return [
|
||||||
`${prefixCls}-children`
|
`${prefixCls}-children`
|
||||||
]
|
];
|
||||||
},
|
},
|
||||||
selectedCls () {
|
selectedCls () {
|
||||||
return [
|
return [
|
||||||
|
@ -112,7 +112,13 @@
|
||||||
},
|
},
|
||||||
handleCheck () {
|
handleCheck () {
|
||||||
if (this.disabled) return;
|
if (this.disabled) return;
|
||||||
this.data.checked = !this.data.checked;
|
const checked = !this.data.checked;
|
||||||
|
if (!checked || this.indeterminate) {
|
||||||
|
findComponentsDownward(this, 'TreeNode').forEach(node => node.data.checked = false);
|
||||||
|
} else {
|
||||||
|
findComponentsDownward(this, 'TreeNode').forEach(node => node.data.checked = true);
|
||||||
|
}
|
||||||
|
this.data.checked = checked;
|
||||||
this.dispatch('Tree', 'checked');
|
this.dispatch('Tree', 'checked');
|
||||||
},
|
},
|
||||||
setIndeterminate () {
|
setIndeterminate () {
|
||||||
|
@ -126,7 +132,7 @@
|
||||||
mounted () {
|
mounted () {
|
||||||
this.$on('indeterminate', () => {
|
this.$on('indeterminate', () => {
|
||||||
this.setIndeterminate();
|
this.setIndeterminate();
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="prefixCls">
|
<div :class="prefixCls">
|
||||||
<Tree-node
|
<Tree-node
|
||||||
v-for="item in currentData"
|
v-for="item in data"
|
||||||
:key="item"
|
:key="item"
|
||||||
:data="item"
|
:data="item"
|
||||||
visible
|
visible
|
||||||
|
@ -46,21 +46,15 @@
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
prefixCls: prefixCls,
|
prefixCls: prefixCls
|
||||||
currentData: this.data
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
|
||||||
data (val) {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
getSelectedNodes () {
|
getSelectedNodes () {
|
||||||
const nodes = findComponentsDownward(this, 'TreeNode');
|
const nodes = findComponentsDownward(this, 'TreeNode');
|
||||||
return nodes.filter(node => node.data.selected).map(node => node.data);
|
return nodes.filter(node => node.data.selected).map(node => node.data);
|
||||||
},
|
},
|
||||||
updateData () {
|
updateData (isInit = true) {
|
||||||
// init checked status
|
// init checked status
|
||||||
function reverseChecked(data) {
|
function reverseChecked(data) {
|
||||||
if (data.children) {
|
if (data.children) {
|
||||||
|
@ -69,8 +63,11 @@
|
||||||
if (node.children) node = reverseChecked(node);
|
if (node.children) node = reverseChecked(node);
|
||||||
if (node.checked) checkedLength++;
|
if (node.checked) checkedLength++;
|
||||||
});
|
});
|
||||||
// data.checked = checkedLength >= data.children.length;
|
if (isInit) {
|
||||||
if (checkedLength >= data.children.length) data.checked = true;
|
if (checkedLength >= data.children.length) data.checked = true;
|
||||||
|
} else {
|
||||||
|
data.checked = checkedLength >= data.children.length;
|
||||||
|
}
|
||||||
return data;
|
return data;
|
||||||
} else {
|
} else {
|
||||||
return data;
|
return data;
|
||||||
|
@ -88,7 +85,7 @@
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.currentData = this.data.map(node => reverseChecked(node)).map(node => forwardChecked(node));
|
this.data.map(node => reverseChecked(node)).map(node => forwardChecked(node));
|
||||||
this.broadcast('TreeNode', 'indeterminate');
|
this.broadcast('TreeNode', 'indeterminate');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -106,7 +103,7 @@
|
||||||
this.$emit('on-select-change', this.getSelectedNodes());
|
this.$emit('on-select-change', this.getSelectedNodes());
|
||||||
});
|
});
|
||||||
this.$on('checked', () => {
|
this.$on('checked', () => {
|
||||||
this.updateData();
|
this.updateData(false);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Add table
Reference in a new issue