item.vue
1.86 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
<style scoped>
.item {
cursor: pointer;
}
.chrild-ul {
padding-left: 21px;
line-height: 1.5em;
list-style-type: dot;
}
</style>
<template>
<!-- <li>
<div @click='toggle'>
<i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
<i v-if='!isFolder' class="fa fa-file-text"></i> {{model.hdeptname}}
</div>
<ul v-show="open" v-if='isFolder' style="color: red; margin-left: 15px;">
<items v-for='cel in model.chrild' :model='cel'></items>
</ul>
</li> -->
<li>
<div class="item group-btns f-size14" v-on:click="toggle(model.guid)" @dblclick="changeType"> <!-- :class="{bold: isFolder}" -->
<span class="tbtn tb-add-q" v-if="isFolder && !open"></span><span class="tbtn tb-remove-q" v-if="isFolder && open"></span>{{model.hdeptname}} <!-- [{{open ? '-' : '+'}}] -->
</div>
<ul class="chrild-ul" v-show="open" v-if="isFolder">
<item class="item" v-for="model in model.chrild" :model="model"></item>
</ul>
</li>
</template>
<script type="text/javascript">
export default {
name: 'items',
props: ['model'],
components: {},
data: function () {
return {
open: false,
}
},
computed: {
isFolder: function() {
return this.model.chrild && this.model.chrild.length
}
},
methods: {
toggle: function(guid,hdeptname) {
this.$dispatch('child-say',guid);
if(this.isFolder) {
this.open = !this.open
}
},
changeType: function () {
if (!this.isFolder) {
// Vue.set(this.model, 'children', [])
this.open = true;
}
},
}
}
</script>