github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

'新增tabs标签页'

pull/80/head
lin-xin 2018-04-19 20:51:27 +08:00
parent 7880389033
commit 13361b55ef
4 changed files with 141 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/Sidebar.vue
View File

@ -40,6 +40,11 @@
index: 'table',
title: '基础表格'
},
{
icon: 'el-icon-message',
index: 'tabs',
title: 'tab选项卡'
},
{
icon: 'el-icon-date',
index: '3',

128
src/components/page/Tabs.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<div class="">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-message"></i> tab选项卡</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<el-tabs v-model="message">
<el-tab-pane :label="`未读消息(${unread.length})`" name="first">
<el-table :data="unread" :show-header="false" style="width: 100%">
<el-table-column>
<template slot-scope="scope">
<span class="message-title">{{scope.row.title}}</span>
</template>
</el-table-column>
<el-table-column prop="date" width="180"></el-table-column>
<el-table-column width="120">
<template slot-scope="scope">
<el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button>
</template>
</el-table-column>
</el-table>
<div class="handle-row">
<el-button type="primary">全部标为已读</el-button>
</div>
</el-tab-pane>
<el-tab-pane :label="`已读消息(${read.length})`" name="second">
<template v-if="message === 'second'">
<el-table :data="read" :show-header="false" style="width: 100%">
<el-table-column>
<template slot-scope="scope">
<span class="message-title">{{scope.row.title}}</span>
</template>
</el-table-column>
<el-table-column prop="date" width="150"></el-table-column>
<el-table-column width="120">
<template slot-scope="scope">
<el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="handle-row">
<el-button type="danger">删除全部</el-button>
</div>
</template>
</el-tab-pane>
<el-tab-pane :label="`回收站(${recycle.length})`" name="third">
<template v-if="message === 'third'">
<el-table :data="recycle" :show-header="false" style="width: 100%">
<el-table-column>
<template slot-scope="scope">
<span class="message-title">{{scope.row.title}}</span>
</template>
</el-table-column>
<el-table-column prop="date" width="150"></el-table-column>
<el-table-column width="120">
<template slot-scope="scope">
<el-button @click="handleRestore(scope.$index)">还原</el-button>
</template>
</el-table-column>
</el-table>
<div class="handle-row">
<el-button type="danger">清空回收站</el-button>
</div>
</template>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
export default {
data() {
return {
message: 'first',
showHeader: false,
unread: [{
date: '2018-04-19 20:00:00',
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护',
},{
date: '2018-04-19 21:00:00',
title: '今晚12点整发大红包，先到先得',
}],
read: [{
date: '2018-04-19 20:00:00',
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
}],
recycle: [{
date: '2018-04-19 20:00:00',
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
}]
}
},
methods: {
handleRead(index) {
const item = this.unread.splice(index, 1);
console.log(item);
this.read = item.concat(this.read);
},
handleDel(index) {
const item = this.read.splice(index, 1);
this.recycle = item.concat(this.recycle);
},
handleRestore(index) {
const item = this.recycle.splice(index, 1);
this.read = item.concat(this.read);
}
},
computed: {
unreadNum(){
return this.unread.length;
}
}
}
</script>
<style>
.message-title{
cursor: pointer;
}
.handle-row{
margin-top: 30px;
}
</style>

5
src/router/index.js
View File

@ -24,6 +24,11 @@ export default new Router({
component: resolve => require(['../components/page/BaseTable.vue'], resolve),
meta: { title: '基础表格' }
},
{
path: '/tabs',
component: resolve => require(['../components/page/Tabs.vue'], resolve),
meta: { title: 'tab选项卡' }
},
{
path: '/form',
component: resolve => require(['../components/page/BaseForm.vue'], resolve),

3
static/css/color-dark.css
View File

@ -19,4 +19,7 @@
.tags-li.active {
border: 1px solid #409EFF;
background-color: #409EFF;
}
.message-title{
color: #20a0ff;
}