node.vue
3.77 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
114
<template>
<collapse-transition>
<ul :class="classes">
<li>
<span :class="arrowClasses" @click="handleExpand">
<Icon type="arrow-right-b"></Icon>
</span>
<Checkbox
v-if="showCheckbox"
:value="data.checked"
:indeterminate="data.indeterminate"
:disabled="data.disabled || data.disableCheckbox"
@click.native.prevent="handleCheck"></Checkbox>
<Render v-if="data.render" :render="data.render"></Render>
<span v-else :class="titleClasses" v-html="data.title" @click="handleSelect"></span>
<Tree-node
v-if="data.expand"
v-for="item in data.children"
:key="item.nodeKey"
:data="item"
:multiple="multiple"
:show-checkbox="showCheckbox">
</Tree-node>
</li>
</ul>
</collapse-transition>
</template>
<script>
import Checkbox from '../checkbox/checkbox.vue';
import Icon from '../icon/icon.vue';
import Render from '../base/render';
import CollapseTransition from '../base/collapse-transition';
import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-tree';
export default {
name: 'TreeNode',
mixins: [ Emitter ],
components: { Checkbox, Icon, CollapseTransition, Render },
props: {
data: {
type: Object,
default () {
return {};
}
},
multiple: {
type: Boolean,
default: false
},
showCheckbox: {
type: Boolean,
default: false
}
},
data () {
return {
prefixCls: prefixCls
};
},
computed: {
classes () {
return [
`${prefixCls}-children`
];
},
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);
this.dispatch('Tree', 'toggle-expand', this.data);
},
handleSelect () {
if (this.data.disabled) return;
this.dispatch('Tree', 'on-selected', this.data.nodeKey);
},
handleCheck () {
if (this.data.disabled) return;
const changes = {
checked: !this.data.checked && !this.data.indeterminate,
nodeKey: this.data.nodeKey
};
this.dispatch('Tree', 'on-check', changes);
}
}
};
</script>