vue 框架引入element翻页组件

最新推荐文章于 2023-11-21 15:55:33 发布

hmily6666

最新推荐文章于 2023-11-21 15:55:33 发布

阅读量479

点赞数

本文链接：https://blog.csdn.net/qq_39510798/article/details/80998173

版权

1.表格里引入

     
 
 
   < 
   div 
   class= 
   "block" 
   style= 
   "padding-top: 20px;border: 1px solid #e0e6ed;text-align:right;padding-bottom:10px;" 
   > 
  

          
   < 
   el-pagination 
   @size-change=" 
   handleSizeChange" 
   @current-change=" 
   handleCurrentChange" 
   :current-page=" 
   page. 
   pageNo" 
   :page-sizes="[ 
   10, 
   20, 
   30, 
   40]" 
   :page-size=" 
   page. 
   pageSize" 
   layout= 
   "total, sizes, prev, pager, next, jumper" 
   :total=" 
   page. 
   totalRecords" 
   > 
  

         
   </ 
   el-pagination 
   > 
  
 
   </ 
   div 
   > 
  
 
   
 
 
  
 
 

2.参数声明（也可以在方法里声明）

 
  data() { 
 
  return { 
 
   page: { 
  
   pageNo: 
   1, 
   //当前页 
  
   pageSize: 
   10, 
   //每页条数, 默认10条 
  
   totalRecords: 
   0, 
   //待办总条数 
  
   pageNo1: 
   1, 
   //当前页 
  
   pageSize1: 
   10, 
   //每页条数, 默认10条 
  
   totalRecords1: 
   0, 
   //待办总条数 
  
                    }, 
  
  tableHeight:document. 
  body. 
  offsetHeight - 
  350, 
 
           }; 
 
       },

3.在methods方法里

 
 methods: { 

             
   //每页显示的数据条数 
  
   handleSizeChange( 
   val) { 
  
   this. 
   page. 
   pageSize = 
   val; 
  
   this. 
   getList(); 
  
            }, 
  
   //点击页数切换 
  
   handleCurrentChange( 
   val) { 
  
   this. 
   page. 
   pageNo = 
   val; 
  
   this. 
   getList(); 
  
            }, 
  
   //每页显示的数据条数 
  
   handleSizeChange1( 
   val) { 
  
   this. 
   page. 
   pageSize1 = 
   val; 
  
   this. 
   getList(); 
  
            }, 
  
   //点击页数切换 
  
   handleCurrentChange1( 
   val) { 
  
   this. 
   page. 
   pageNo1 = 
   val; 
  
   this. 
   getList(); 
  
            },

  }， 

在方法调用时引入

 
  getList() { 
 
  let 
  param = { 
 
  pagenum: 
  this. 
  page. 
  pageNo, 
 
  pagesize: 
  this. 
  page. 
  pageSize, 
 
  kssj: 
  null, 
 
  jssj: 
  null, 
 
  searchKey: 
  this. 
  searchKey, 
 
  xmmc: 
  this. 
  xmlb, 
 
  sfbfk: 
  this. 
  activeName, 
 
  sfgk: 
  null 
 
               } 
 
  this. 
  _getFeedList( 
  param). 
  then( 
  data 
  =>{ 
 
  var 
  resultData = 
  JSON. 
  parse( 
  data); 
 
  if( 
  resultData. 
  status == 
  0) { 
 
  var 
  da = 
  resultData. 
  result. 
  list; 
 
  da. 
  forEach( 
  item 
  => { 
 
  item. 
  SFGK = 
  item. 
  SFGK == 
  1? 
  '是': 
  '否'; 
 
  item. 
  CLZT = 
  item. 
  CLZT == 
  1? 
  '已处理': 
  '未处理'; 
 
                       }); 
 
  this. 
  tableData = 
  da; 
 
  this. 
  page. 
  totalRecords = 
  resultData. 
  result. 
  totalRecords; 
 
  console. 
  log( 
  787878, 
  this. 
  tableData) 
 
                   } 
 
               }) 
 
           },