vue+el-pagination分页 踩坑笔记

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

设置选中效果和默认效果

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

二、先展示两个分页

 这里是最左边的两个导航分栏

      
        
          
            
            哈哈哈
          
          
            
            嘻嘻嘻
          
        
      
  

这里包括了中间的分栏和右边的图片展示区域

      

//名称列表展示
        
          
          
        
        
        

//两个不同的分页器，就是视觉效果不同
          
            
            
            
            
            
          
          
//左边列表的分页器
          
        
      
//图片展示区
      

        

          
          
        
      
      
      

        
      
    

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();
            }
        },