listbox.vue
1.83 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
<style scoped>
.listbox_ul,.listbox_ul ul {padding-left:10px;line-height: 1.5em;display: block;clear: both;}
.listbox_ul li{cursor: pointer;list-style: none;}
.listbox_ul li span{display: block;}
.listbox_ul li.active > span {color:blue;}
.listbox_ul li.focus > span {background:#ccc;}
</style>
<template>
<ul class="listbox_ul" v-show="show" :class="class">
<!-- <li>
<span>库房</span>
<ul>
<li>
<span>皮肤科</span>
<ul>
<li>
<span>外药类</span>
</li>
</ul>
</li>
<li>
<span>消化内科</span>
</li>
<li>
<span>肾病科</span>
</li>
<li>
<span>供应室</span>
</li>
</ul>
</li> -->
<listboxs v-for="item in list" :listobj.sync="item"
:openclass="openclass" :focus="focus" :focusclass="focusclass"
:indexid="$index+'_'">
</listboxs>
</ul>
</template>
<script>
var list=[
{name:'库房',children:[
{name:'皮肤科',children:[
{name:'外药类'}
]},
{name:'消化内科'},
{name:'肾病科'},
{name:'供应室'}
]},
{name:'库房2',children:[
{name:'皮肤科2'},
{name:'皮肤科3'},
{name:'皮肤科4'},
{name:'皮肤科5'}
]}
];
module.exports={
props:{
list:{
type:Array,default:function(){
return list;
}
},openclass:{
type:String,default:'openclass'
},show:{
type:Boolean,default:true
},class:{
type:Array,default:[]
},focus:{
type:String,default:''
},focusclass:{
type:String,default:'focusclass'
}
},methods:{
},events:{
'listboxcall':function(item){
this.$emit('call',item);
},'setfocus':function(val){
this.focus=val;
}
},ready:function(){
}
}
</script>