75c32d5f
 梁灏
rebuild Tree
|
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
|
<template>
<transition name="slide-up">
<ul :class="classes" v-show="visible">
<li>
<span :class="arrowClasses" @click="handleExpand">
<Icon type="arrow-right-b"></Icon>
</span>
<Checkbox
v-if="showCheckbox"
:value="data.checked"
:indeterminate="indeterminate"
:disabled="data.disabled || data.disableCheckbox"
@click.native.prevent="handleCheck"></Checkbox>
<span :class="titleClasses" v-html="data.title" @click="handleSelect"></span>
<Tree-node
v-for="item in data.children"
:key="item"
:data="item"
:visible="data.expand"
:multiple="multiple"
:show-checkbox="showCheckbox">
</Tree-node>
</li>
</ul>
</transition>
</template>
<script>
import Checkbox from '../checkbox/checkbox.vue';
import Emitter from '../../mixins/emitter';
import { findComponentsDownward } from '../../utils/assist';
const prefixCls = 'ivu-tree';
export default {
name: 'TreeNode',
mixins: [ Emitter ],
components: { Checkbox },
props: {
data: {
type: Object,
default () {
return {};
}
},
multiple: {
type: Boolean,
default: false
},
showCheckbox: {
type: Boolean,
default: false
},
visible: {
type: Boolean,
default: false
}
},
data () {
return {
prefixCls: prefixCls,
indeterminate: false,
checked: false
};
},
computed: {
classes () {
return [
`${prefixCls}-children`
|
|
75c32d5f
梁灏
rebuild Tree
|
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
114
|
},
selectedCls () {
return [
{
[`${prefixCls}-node-selected`]: this.data.selected
}
];
},
arrowClasses () {
return [
`${prefixCls}-arrow`,
{
[`${prefixCls}-arrow-disabled`]: this.data.disabled,
[`${prefixCls}-arrow-open`]: this.data.expand,
[`${prefixCls}-arrow-hidden`]: !(this.data.children && this.data.children.length)
}
];
},
titleClasses () {
return [
`${prefixCls}-title`,
{
[`${prefixCls}-title-selected`]: this.data.selected
}
];
}
},
methods: {
handleExpand () {
if (this.data.disabled) return;
this.$set(this.data, 'expand', !this.data.expand);
},
handleSelect () {
if (this.data.disabled) return;
if (this.data.selected) {
this.data.selected = false;
} else if (this.multiple) {
this.$set(this.data, 'selected', !this.data.selected);
} else {
this.dispatch('Tree', 'selected', this.data);
}
this.dispatch('Tree', 'on-selected');
},
handleCheck () {
if (this.disabled) return;
|
|
3c145e6f
梁灏
update Tree
|
115
116
117
118
119
120
121
|
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;
|
|
75c32d5f
梁灏
rebuild Tree
|
122
123
124
125
126
127
128
129
130
131
132
133
134
|
this.dispatch('Tree', 'checked');
},
setIndeterminate () {
this.indeterminate = this.data.checked ? false : findComponentsDownward(this, 'TreeNode').some(node => node.data.checked);
}
},
created () {
// created node.vue first, mounted tree.vue second
if (!this.data.checked) this.$set(this.data, 'checked', false);
},
mounted () {
this.$on('indeterminate', () => {
this.setIndeterminate();
|
