vue el-tabs中的分页 每个互不影响

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