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
<template>
<el-container>
<el-aside width="250px">
<el-menu
:default-active="index">
<el-submenu v-for="data in leftList" :key="data.id" :index="data.name">
<template slot="title">
<span>{{data.name}}({{data.children | lengthNum}})
</span>
</template>
<el-submenu :index="item.name" v-for="item in data.children" :key="item.id">
<span slot="title">
{{item.name}}
<i class="iconfont icon-shangyi"></i>
<i class="iconfont icon-xiayi"></i>
<i class="iconfont icon-bianji"></i>
<i class="iconfont icon-shanchu"></i>
</span>
<el-menu-item :index="i.name" v-for="i in item.children">
{{i.name}}
<i class="iconfont icon-shangyi"></i>
<i class="iconfont icon-xiayi"></i>
<i class="iconfont icon-bianji"></i>
<i class="iconfont icon-shanchu"></i>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<that-list :id="id"></that-list>
</el-main>
</el-container>
</template>
<script>
import {getCategoryApi} from "../../service/api";
import thatList from './list'
export default {
data(){
return {
leftList:[],
index:'',
id:''
}
},
components:{
thatList
},
filters:{
lengthNum:function (value) {
if(value){
return value.length
}else{
return '0'
}
}
},
methods:{
getList(){
getCategoryApi('').then(res=>{
this.leftList = res;
if(this.id === ''){
this.id = res[0].children[0].id;
this.index = res[0].children[0].name
}
})
},
chooseId(data){
this.id = data.id
}
},
mounted(){
this.getList()
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.el-container{
height: 100%;
.el-menu{
height: 100%;
}
}
</style>