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
| <template>
| <div
| id="clone-tree-org"
| class="clone-tree-org tree-org"
| :class="{horizontal, collapsable}">
| <tree-org-node
| :data="data"
| :props="props"
| :is-clone="false"
| :horizontal="horizontal"
| :label-style="labelStyle"
| :collapsable="collapsable"
| :render-content="renderContent"
| :label-class-name="labelClassName"
| >
| <template v-if="$scopedSlots.default" v-slot="{node}">
| <slot :node="node"></slot>
| </template>
| <template v-if="$scopedSlots.expand" v-slot:expand="{node}">
| <slot name="expand" :node="node"></slot>
| </template>
| </tree-org-node>
| </div>
| </template>
| <script>
| import render from '../tree-org/node';
| export default {
| components: {
| TreeOrgNode: {
| render,
| functional: true
| }
| },
| props: {
| data: {
| type: Object,
| required: true
| },
| props: {
| type: Object,
| default: () => ({
| label: 'label',
| expand: 'expand',
| children: 'children'
| })
| },
| horizontal: Boolean,
| selectedKey: String,
| collapsable: Boolean,
| renderContent: Function,
| labelStyle: Object,
| labelClassName: [Function, String],
| selectedClassName: [Function, String]
| },
| data(){
| return {
| init:false,
| }
| },
| mounted(){
| if(!this.init){
| document.body.appendChild(this.$el);
| }
| this.init = true;
| },
| destroyed() {
| // remove DOM node after destroy
| if (this.$el && this.$el.parentNode) {
| this.$el.parentNode.removeChild(this.$el);
| }
| }
| }
| </script>
| <style lang="less" scoped>
| .clone-tree-org{
| opacity: 0;
| position: fixed;
| top:0;
| left:0;
| z-index:1000;
| }
| </style>
|
|
