153 lines
4.7 KiB
Vue
153 lines
4.7 KiB
Vue
<template>
|
|
<div>
|
|
<el-drawer
|
|
:visible.sync="drawer"
|
|
:direction="direction"
|
|
:before-close="handleClose"
|
|
:withHeader="false"
|
|
size="70%"
|
|
class="drawer"
|
|
>
|
|
<el-container style="height: 100vh">
|
|
<el-aside width="200px" class="aside">
|
|
<div class="header">消息中心</div>
|
|
<div class="title">
|
|
<div @click="tab(1)">全部消息</div>
|
|
<div @click="tab(2)">未读消息</div>
|
|
<div @click="tab(3)">已读消息</div>
|
|
</div>
|
|
</el-aside>
|
|
<el-container class="content_box">
|
|
<el-header class="header">| {{ this.tabTitle }}</el-header>
|
|
<el-main class="content">
|
|
<div v-if="this.tab_index == 1">
|
|
<el-table
|
|
ref="multipleTable"
|
|
:data="tableData"
|
|
tooltip-effect="dark"
|
|
style="width: 100%"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="55"> </el-table-column>
|
|
<el-table-column label="标题内容" width="220">
|
|
<template slot-scope="scope">{{ scope.row.date }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="提交时间" width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
label="类型"
|
|
show-overflow-tooltip
|
|
>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div v-if="this.tab_index == 2">
|
|
<el-table
|
|
ref="multipleTable"
|
|
:data="tableData"
|
|
tooltip-effect="dark"
|
|
style="width: 100%"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="55"> </el-table-column>
|
|
<el-table-column label="标题内容" width="220">
|
|
<template slot-scope="scope">{{ scope.row.date }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="提交时间" width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
label="类型"
|
|
show-overflow-tooltip
|
|
>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div v-if="this.tab_index == 3">
|
|
<el-table
|
|
ref="multipleTable"
|
|
:data="tableData"
|
|
tooltip-effect="dark"
|
|
style="width: 100%"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="55"> </el-table-column>
|
|
<el-table-column label="标题内容" width="220">
|
|
<template slot-scope="scope">{{ scope.row.date }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="提交时间" width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
label="类型"
|
|
show-overflow-tooltip
|
|
>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "WebKbossIndex",
|
|
|
|
data() {
|
|
return {
|
|
tableData: [
|
|
{
|
|
date: "2016-05-03",
|
|
name: "王小虎",
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
},
|
|
{
|
|
date: "2016-05-02",
|
|
name: "王小虎",
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
},
|
|
{
|
|
date: "2016-05-04",
|
|
name: "王小虎",
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
},
|
|
{
|
|
date: "2016-05-01",
|
|
name: "王小虎",
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
},
|
|
{
|
|
date: "2016-05-08",
|
|
name: "王小虎",
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
},
|
|
{
|
|
date: "2016-05-06",
|
|
name: "王小虎",
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
},
|
|
{
|
|
date: "2016-05-07",
|
|
name: "王小虎",
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
|
|
mounted() {},
|
|
|
|
methods: {
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|