vue+el-pagination分页 踩坑笔记

设置选中效果和默认效果的相关博客：https://blog.csdn.net/weixin_42418774/article/details/103242571

设置选中效果和默认效果

一、首先说一下原因，我是一页写两个分页器，所以就有一些问题出现了

二、先展示两个分页

 这里是最左边的两个导航分栏
<el-row class="tac">
      <el-col :span="12">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          text-color="#000"
          active-text-color="#ff784a"
          @select="onClick"    //按钮点击事件
          >
          <el-menu-item index="1" @select="onClick">
            <i class="el-icon-s-custom"></i>
            <span slot="title">哈哈哈</span>
          </el-menu-item>
          <el-menu-item index="2" @select="onClick">
            <i class="el-icon-camera-solid"></i>
            <span slot="title">嘻嘻嘻</span>
          </el-menu-item>
        </el-menu>
      </el-col>
  </el-row>

这里包括了中间的分栏和右边的图片展示区域
<div class="body">
      <div style="width:190px;height:100%">
//名称列表展示
        <el-table
          :data="tableData"
          style="width: 190px;margin-left: 1px;margin-top: 1px;padding-top: 110px;font-size: 16px;height: 100%"
          highlight-current-row
          @row-click="albumClick"  //列表点击事件
          ref="multipleTable"
        >
          <el-table-column
            id="id"
            prop="name"
            label="名称"
            width="190">
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="pagBox1">
//两个不同的分页器，就是视觉效果不同
          <!--<el-pagination-->
            <!--@current-change="current_change1"-->
            <!--@size-change="handleSizeChange"-->
            <!--:current-page="1"-->
            <!--layout="total,jumper"-->
            <!--:total="total1">-->
          <!--</el-pagination>-->
          <!--class="page" background-->
//左边列表的分页器
          <el-pagination  layout="prev, pager, next" :total="total1" @current-change='current_change1'  ref="Pagination" :current-page.sync = "currentPage1"></el-pagination>
        </div>
      </div>
//图片展示区
      <div class="img_box">
        <div v-for="img in photoData">
          <!--<image class="img" :src="img.compressUrl" mode="aspectFill"></image>-->
          <img class="img" :src="img.compressUrl" mode="aspectFill"/>
        </div>
      </div>
      <!-- 图片分页器 -->
      <div class="pagBox">
        <el-pagination class="page" background layout="prev, pager, next" :total="total" @current-change='current_change'></el-pagination>
      </div>
    </div>

js事件编写：

 //  左边导航
        onClick(index){
          console.log('index',index)
          if(index ==1){
         //   this.$refs.Pagination.lastEmittedPage = 1
            this.onPhotoAlbumData();
            this.radio="0";
            this.onPhotoData();
          }else{
          //  this.$refs.Pagination.lastEmittedPage = 1
            this.onAlbumdata1();
            this.radio="1";
            this.onPhotoData();
          }
        },
        //名称点击事件
        albumClick(row) {
          this.albumID = row.id;
          this.currentPage=1;
          this.onPhotoData();
          console.log('id--->',this.albumID)
        },

两个分页器点击事件：就是分页器的页码点击事件：1、2、3这些
 //分页器方法
        current_change (currentPage) {
          this.currentPage = currentPage
          this.onPhotoData()   //图片渲染接口
        },
        current_change1 (currentPage1) {
//如果是最左边第一个按钮就执行渲染onPhotoAlbumData方法
            if(this.num == true){
              this.currentPage3 = currentPage1;  //把点击的页码传递给渲染数据接口的参数中
              this.onPhotoAlbumData();
            }else{
//否则就执行onAlbumdata1方法
              this.currentPage2 = currentPage1
              this.onAlbumdata1();
            }
        },