tree.vue
3.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
<div :class="prefixCls">
<Tree-node
v-for="item in currentData"
:key="item"
:data="item"
visible
:multiple="multiple"
:show-checkbox="showCheckbox">
</Tree-node>
</div>
</template>
<script>
import TreeNode from './node.vue';
import { findComponentsDownward } from '../../utils/assist';
import Emitter from '../../mixins/emitter';
import { t } from '../../locale';
const prefixCls = 'ivu-tree';
export default {
name: 'Tree',
mixins: [ Emitter ],
components: { TreeNode },
props: {
data: {
type: Array,
default () {
return [];
}
},
multiple: {
type: Boolean,
default: false
},
showCheckbox: {
type: Boolean,
default: false
},
emptyText: {
type: String,
default () {
return t('i.tree.emptyText');
}
}
},
data () {
return {
prefixCls: prefixCls,
currentData: this.data
};
},
watch: {
data (val) {
}
},
methods: {
getSelectedNodes () {
const nodes = findComponentsDownward(this, 'TreeNode');
return nodes.filter(node => node.data.selected).map(node => node.data);
},
updateData () {
// init checked status
function reverseChecked(data) {
if (data.children) {
let checkedLength = 0;
data.children.forEach(node => {
if (node.children) node = reverseChecked(node);
if (node.checked) checkedLength++;
});
// data.checked = checkedLength >= data.children.length;
if (checkedLength >= data.children.length) data.checked = true;
return data;
} else {
return data;
}
}
function forwardChecked(data) {
if (data.children) {
data.children.forEach(node => {
if (data.checked) node.checked = true;
if (node.children) node = forwardChecked(node);
});
return data;
} else {
return data;
}
}
this.currentData = this.data.map(node => reverseChecked(node)).map(node => forwardChecked(node));
this.broadcast('TreeNode', 'indeterminate');
}
},
mounted () {
this.updateData();
this.$on('selected', ori => {
const nodes = findComponentsDownward(this, 'TreeNode');
nodes.forEach(node => {
this.$set(node.data, 'selected', false);
});
this.$set(ori, 'selected', true);
});
this.$on('on-selected', () => {
this.$emit('on-select-change', this.getSelectedNodes());
});
this.$on('checked', () => {
this.updateData();
});
}
};
</script>