vue定义的data数据,methods数据,全部都在这个里面了
过滤出不同类型的数组,然后在不同的table页面和表枚进行展示。
// 公告栏
getAnnouceData(){
pageAnnouceListApi().then((res) => {
if (res.resultCode == 0) {
this.announceList = res.data;
// console.log(this.announceList,"announcelist--------------------");
this.announceList1 = this.announceList.filter(function (type) {
return type.annType == "系统通知";
});
this.page1.totalPage1 = this.announceList1.length;
this.announceList2 = this.announceList.filter(function (type) {
return type.annType == "其他";
});
this.page2.totalPage2 = this.announceList2.length;
}
}).catch((err) => {
this.$store.dispatch("loading/CHANGE_LOADING", false);
});
},
// 每页数
sizeChangeHandle1(val) {
this.page1.pageSize1 = val;
this.page1.pageIndex1 = 1;
this.getAnnouceData();
},
// 当前页
currentChangeHandle1(val) {
this.page1.pageIndex1 = val;
this.getAnnouceData();
},
// 每页数
sizeChangeHandle2(val) {
this.page2.pageSize2 = val;
this.page2.pageIndex2 = 1;
this.getAnnouceData();
},
// 当前页
currentChangeHandle2(val) {
this.page2.pageIndex2 = val;
this.getAnnouceData();
},
// 前往末页
toLastPage1() {
let max = Math.ceil(this.tablePage.totalResult / this.tablePage.pageSize1);
this.handleCurrentChange(max);
},
toLastPage2() {
let max = Math.ceil(this.tablePage.totalResult / this.tablePage.pageSize2);
this.handleCurrentChange(max);
},
// -----------
page1: {
pageIndex1: 1,
pageSize1: 10,
totalPage1: 0,
},
page2: {
pageIndex2: 1,
pageSize2: 10,
totalPage2: 0,
},
<!-- 弹框:意外原因 -->
<el-dialog
v-dialogDrag
title="公告栏"
:visible.sync="annDialog"
width="40%"
class="dialogBox">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="系统通知" name="first">
<el-table
:data="announceList1"
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column label="公告内容" show-overflow-tooltip>
<template slot-scope="scope">
<span> <strong style="color: deepskyblue"> {{scope.row.annContent}} </strong> - {{'('+scope.row.startTime +')' || "--"}} </span>
</template>
</el-table-column>
</el-table>
<el-row>
<el-col :span="24">
<div class="pagination">
<!-- 分页 -->
<el-pagination background @size-change="sizeChangeHandle1" @current-change="currentChangeHandle1"
:current-page="page1.pageIndex1" :page-sizes="[10, 20, 50, 100]" :page-size="page1.pageSize1"
:total="page1.totalPage1" layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="其他" name="second">
<el-table
:data="announceList2"
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column label="公告内容" show-overflow-tooltip>
<template slot-scope="scope">
<span> <strong style="color: deepskyblue"> {{scope.row.annContent}} </strong>
<span v-if="scope.row.startTime != null"> {{'-'+'('+scope.row.startTime +')' || "--"}} </span>
</span>
</template>
</el-table-column>
</el-table>
<el-row>
<el-col :span="24">
<div class="pagination">
<!-- 分页 -->
<el-pagination background @size-change="sizeChangeHandle2" @current-change="currentChangeHandle2"
:current-page="page2.pageIndex2" :page-sizes="[10, 20, 50, 100]" :page-size="page2.pageSize2"
:total="page2.totalPage2" layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</el-dialog>