tabs展示 重点看分页
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="项目组成员" name="first">
<el-table v-loading="loading" :data="getListByContract" @selection-change="handleSelectionChange">
<el-table-column label="序号" type="index" :index="Nindex" align="center" prop="id"/>
<el-table-column label="项目成员" align="center" prop="projectName"/>
<el-table-column label="职位" align="center" prop="position"/>
<el-table-column label="在职状态" align="center" prop="serviceStatus">
<template slot-scope="scope">
<dict-tag :options="dict.type.service_status" :value="scope.row.serviceStatus"/>
</template>
</el-table-column>
<el-table-column label="加入时间" align="center" prop="joinTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.joinTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="离开时间" align="center" prop="leaveTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.leaveTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="member>0"
:total="member"
:page.sync="ByContract.pageNum"
:limit.sync="ByContract.pageSize"
:page-sizes="[ 5, 10, 15]"
@pagination="pbSel(activeName)"
/>
</el-tab-pane>
<el-tab-pane label="项目进度" name="second">
<el-table v-loading="loading" :data="progressList">
<el-table-column label="序号" type="index" :index="Nindex" align="center" prop="id"/>
<el-table-column label="任务名称" align="center" prop="missionName"/>
<el-table-column label="完成情况" align="center" prop="completion"/>
<el-table-column label="完成时间" align="center" prop="completionTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.completionTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="完成进度" align="center" prop="progress">
<template slot-scope="scope">
<el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.progress" :format="format"
:status="getSattus(scope.row.progress) "></el-progress>
</template>
</el-table-column>
</el-table>
<pagination
v-show="progress>0"
:total="progress"
:page.sync="getprogressList.pageNum"
:limit.sync="getprogressList.pageSize"
:page-sizes="[ 5, 10, 15]"
@pagination="pbSel(activeName)"
/>
</el-tab-pane>
<el-tab-pane label="项目文件" name="third">
<el-table v-loading="loading" :data="attachmentList">
<el-table-column label="序号" type="index" :index="Nindex" align="center" prop="id"/>
<el-table-column label="上传人" align="center" prop="createName"/>
<el-table-column label="文件名称" align="center" prop="remark">
<template slot-scope="scope">
<div @click="fileOpen(scope.row)" style="color: #00a2ff;cursor:pointer;">{{ scope.row.remark }}</div>
</template>
</el-table-column>
<el-table-column label="上传时间" align="center" prop="createTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="pagingFileTotal>0"
:total="pagingFileTotal"
:page-sizes="[ 5, 10, 15]"
:page.sync="pagingFile.pageNum"
:limit.sync="pagingFile.pageSize"
@pagination="pbSel(activeName)"
/>
</el-tab-pane>
</el-tabs>
data中定义
// 项目组成员分页
member: 0,
ByContract: {
pageNum: 1,
pageSize: 5,
},
//项目进度分页
progress: 0,
getprogressList: {
pageNum: 1,
pageSize: 5,
},
//项目文件分页
pagingFileTotal: 0,
pagingFile: {
pageNum: 1,
pageSize: 5,
},
tabs绑定值
activeName: 'first',
tabs的点击方法 获取分页信息
handleClick(tab) {
this.pbSel(tab.name)
},
根据tabs的绑定值不同加不同的分页 最后方法是获取接口返回值
pbSel(name) {
let row = {};
if (name =="first"){
row = this.ByContract;
}else if (name =="second"){
row = this.getprogressList;
}else if (name =="third"){
row = this.pagingFile;
}
row.type = name;
row.id = this.global
this.checkDetails(row);
},
checkDetails(row) {
if (row.type != "second" && row.type != "third") { // 默认选择第一个tabs页
var params = { // 传递的参数
contractManageId:row.id,
type:row.type,
// 一共有多少条数据
pageNum: row.pageNum,
// 一页多少数据
pageSize: row.pageSize,
}
getByContract(params).then(response => {
this.getListByContract = response.rows;
this.member = response.total;
});
} else if (row.type == "second") {
var params = {
contractManageId: row.id,
type:row.type,
// 一共有多少条数据
pageNum: row.pageNum,
// 一页多少数据
pageSize: row.pageSize,
}
getListprogressList(params).then(response => {
this.progressList = response.rows;
this.progress = response.total;
});
} else if (row.type == "third") {
var params = {
contractManageId: row.id,
type:row.type,
// 一共有多少条数据
pageNum: row.pageNum,
// 一页多少数据
pageSize: row.pageSize,
}
listAttachment(params).then(response => {
this.attachmentList = response.rows;
this.pagingFileTotal = response.total;
for (var i = 0; i < this.attachmentList.length; i++) {
var str = this.attachmentList[i].url
var nstr = str.split('/')
this.attachmentList[i].remark = nstr[nstr.length - 1] // 将分割好后的字符给到集合中的remark
}
});
}
this.global = row.id
getManage(row.id).then(response => { // tabs中上方form数据显示 不重要
this.manageForm = response.data;
this.dialogVisible = true;
});
},
参考地址：vue el-tabs动态生成 每一个tab包含分别的分页 分页展示互不影响_F-Fanger的博客-CSDN博客_vue中el-tabs
