appList.vue
5.46 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<template>
<el-container style="height: 853px; border: 1px solid #eee">
<el-aside width="250px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1','2', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message" />非常戴镜</template>
<el-menu-item v-for="(item,i) in nav_menu_data" :key="i" :index="item.name">{{ item.title }}</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu" />亚当光学</template>
<el-menu-item index="2-1">产品列表</el-menu-item>
<el-menu-item index="2-2">订单列表</el-menu-item>
<el-menu-item index="2-3">用户列表</el-menu-item>
<el-menu-item index="2-4">运行分析</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting" />秀野光学</template>
<el-menu-item index="3-1">产品列表</el-menu-item>
<el-menu-item index="3-2">订单列表</el-menu-item>
<el-menu-item index="3-3">用户列表</el-menu-item>
<el-menu-item index="3-4">运行分析</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: center; font-size: 24px">
<span>这里的title</span>
</el-header>
<el-main>
<el-tabs v-model="activeName" tab-position="top" @tab-click="handleClick">
<el-tab-pane label="产品列表" name="first">
<el-table :data="prodListTableData" stripe>
<el-table-column prop="prodInfo" label="产品信息" width="340" />
<el-table-column prop="prodTag" label="产品标签" width="340" />
<el-table-column prop="stock" label="库存" width="340" />
<el-table-column label="操作">
<el-button type="text">从应用中删除</el-button>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="订单列表" name="second">
<el-table :data="prodListTableData" stripe>
<el-table-column prop="prodInfo" label="下单时间" width="220" />
<el-table-column prop="prodTag" label="金额" width="220" />
<el-table-column prop="stock" label="产品id" width="220" />
<el-table-column prop="stock" label="订单号" width="220" />
<el-table-column prop="stock" label="状态" width="220" />
<el-table-column label="操作">
<el-button type="text">从应用中删除</el-button>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="用户列表" name="third">
<el-table :data="prodListTableData" stripe>
<el-table-column prop="prodInfo" label="用户id" width="180" />
<el-table-column prop="prodTag" label="加入时间" width="180" />
<el-table-column prop="stock" label="引流人" width="180" />
<el-table-column prop="stock" label="引流渠道" width="180" />
<el-table-column prop="stock" label="消费额度" width="180" />
<el-table-column prop="stock" label="访问时长" width="180" />
<el-table-column prop="stock" label="带来流量" width="180" />
<el-table-column label="操作">
<el-button type="text">从应用中删除</el-button>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="运营分析" name="fourth">
<el-table :data="prodListTableData" stripe>
<el-table-column prop="prodInfo" label="产品信息" width="340" />
<el-table-column prop="prodTag" label="产品标签" width="340" />
<el-table-column prop="stock" label="库存" width="340" />
<el-table-column label="操作">
<el-button type="text">从应用中删除</el-button>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
return {
activeName: 'second',
path: '',
nav_menu_data: [{
title: '产品列表',
name: 'appList'
}, {
title: '订单列表',
name: 'orderList'
}, {
title: '用户列表',
name: 'userList'
}, {
title: '运营分析',
name: 'analys'
}],
prodListTableData: [{
prodInfo: 'pic',
prodTag: '非常带劲',
stock: '102'
},
{
prodInfo: 'pic',
prodTag: '非常带劲',
stock: '4531'
},
{
prodInfo: 'pic',
prodTag: '非常带劲',
stock: '531'
},
{
prodInfo: 'pic',
prodTag: '非常带劲',
stock: '768'
}]
}
},
watch: {
},
created() {
},
method: {
onRouteChanged() {
const that = this
that.path = that.$route.path
},
handleClick(tab, event) {
console.log(tab, event)
}
}
}
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>