Skip to content

Commit 13361b5

Browse files
lin-xinlin-xin
committed
'新增tabs标签页'
1 parent 7880389 commit 13361b5

File tree

4 files changed

+141
-0
lines changed

4 files changed

+141
-0
lines changed

‎src/components/common/Sidebar.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@
4040
index: 'table',
4141
title: '基础表格'
4242
},
43+
{
44+
icon: 'el-icon-message',
45+
index: 'tabs',
46+
title: 'tab选项卡'
47+
},
4348
{
4449
icon: 'el-icon-date',
4550
index: '3',

‎src/components/page/Tabs.vue‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<template>
2+
<div class="">
3+
<div class="crumbs">
4+
<el-breadcrumb separator="/">
5+
<el-breadcrumb-item><i class="el-icon-message"></i> tab选项卡</el-breadcrumb-item>
6+
</el-breadcrumb>
7+
</div>
8+
<div class="container">
9+
<el-tabs v-model="message">
10+
<el-tab-pane :label="`未读消息(${unread.length})`" name="first">
11+
<el-table :data="unread" :show-header="false" style="width: 100%">
12+
<el-table-column>
13+
<template slot-scope="scope">
14+
<span class="message-title">{{scope.row.title}}</span>
15+
</template>
16+
</el-table-column>
17+
<el-table-column prop="date" width="180"></el-table-column>
18+
<el-table-column width="120">
19+
<template slot-scope="scope">
20+
<el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button>
21+
</template>
22+
</el-table-column>
23+
</el-table>
24+
<div class="handle-row">
25+
<el-button type="primary">全部标为已读</el-button>
26+
</div>
27+
</el-tab-pane>
28+
<el-tab-pane :label="`已读消息(${read.length})`" name="second">
29+
<template v-if="message === 'second'">
30+
<el-table :data="read" :show-header="false" style="width: 100%">
31+
<el-table-column>
32+
<template slot-scope="scope">
33+
<span class="message-title">{{scope.row.title}}</span>
34+
</template>
35+
</el-table-column>
36+
<el-table-column prop="date" width="150"></el-table-column>
37+
<el-table-column width="120">
38+
<template slot-scope="scope">
39+
<el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
40+
</template>
41+
</el-table-column>
42+
</el-table>
43+
<div class="handle-row">
44+
<el-button type="danger">删除全部</el-button>
45+
</div>
46+
</template>
47+
</el-tab-pane>
48+
<el-tab-pane :label="`回收站(${recycle.length})`" name="third">
49+
<template v-if="message === 'third'">
50+
<el-table :data="recycle" :show-header="false" style="width: 100%">
51+
<el-table-column>
52+
<template slot-scope="scope">
53+
<span class="message-title">{{scope.row.title}}</span>
54+
</template>
55+
</el-table-column>
56+
<el-table-column prop="date" width="150"></el-table-column>
57+
<el-table-column width="120">
58+
<template slot-scope="scope">
59+
<el-button @click="handleRestore(scope.$index)">还原</el-button>
60+
</template>
61+
</el-table-column>
62+
</el-table>
63+
<div class="handle-row">
64+
<el-button type="danger">清空回收站</el-button>
65+
</div>
66+
</template>
67+
</el-tab-pane>
68+
</el-tabs>
69+
</div>
70+
</div>
71+
</template>
72+
73+
<script>
74+
export default {
75+
data() {
76+
return {
77+
message: 'first',
78+
showHeader: false,
79+
unread: [{
80+
date: '2018-04-19 20:00:00',
81+
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护',
82+
},{
83+
date: '2018-04-19 21:00:00',
84+
title: '今晚12点整发大红包，先到先得',
85+
}],
86+
read: [{
87+
date: '2018-04-19 20:00:00',
88+
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
89+
}],
90+
recycle: [{
91+
date: '2018-04-19 20:00:00',
92+
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
93+
}]
94+
}
95+
},
96+
methods: {
97+
handleRead(index) {
98+
const item = this.unread.splice(index, 1);
99+
console.log(item);
100+
this.read = item.concat(this.read);
101+
},
102+
handleDel(index) {
103+
const item = this.read.splice(index, 1);
104+
this.recycle = item.concat(this.recycle);
105+
},
106+
handleRestore(index) {
107+
const item = this.recycle.splice(index, 1);
108+
this.read = item.concat(this.read);
109+
}
110+
},
111+
computed: {
112+
unreadNum(){
113+
return this.unread.length;
114+
}
115+
}
116+
}
117+
118+
</script>
119+
120+
<style>
121+
.message-title{
122+
cursor: pointer;
123+
}
124+
.handle-row{
125+
margin-top: 30px;
126+
}
127+
</style>
128+

‎src/router/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ export default new Router({
2424
component: resolve => require(['../components/page/BaseTable.vue'], resolve),
2525
meta: { title: '基础表格' }
2626
},
27+
{
28+
path: '/tabs',
29+
component: resolve => require(['../components/page/Tabs.vue'], resolve),
30+
meta: { title: 'tab选项卡' }
31+
},
2732
{
2833
path: '/form',
2934
component: resolve => require(['../components/page/BaseForm.vue'], resolve),

‎static/css/color-dark.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,7 @@
1919
.tags-li.active {
2020
border: 1px solid #409EFF;
2121
background-color: #409EFF;
22+
}
23+
.message-title{
24+
color: #20a0ff;
2225
}

0 commit comments

Comments
 (0)