vue分页之el-pagination用法

587人浏览 / 0人评论 / 添加收藏

标签属性

<el-pagination
@size-change="handleSizeChange" 
@current-change="handleCurrentChange" 
background layout="total, sizes, prev, pager, next, jumper" 
:total="total" 
:page-size="10" 
:page-sizes="[10, 20, 30, 40, 50, 100]">
</el-pagination>


<script>
export default {
  data(){
    return{
      dialogFormVisible:false,
      tableData:[],
      total:0,  //总条数
      pSize:10  //默认10条
    }
  },
  methods:{
  getDataList(index,pageSize){  //获取数据列表
         this.$axios.get('接口地址',{params: {pageSize:pageSize,currentPage:index},
         headers:{accessToken:''}}).then(response=>{
          this.total=response.data.data.rowCount;
          if(response.data){
             this.tableData=response.data.data.data;
           }
         }).catch(err=>{
           alert(err);
         }) 
     }
     ,   
     handleSizeChange(val) {
       console.log('每页'+ val+' 条');
       this.pSize=val;
       this.getDataList(1,val);
     },
     handleCurrentChange(val) {
       console.log('当前页: '+val);
       this.getDataList(val,this.pSize);
     }
  },
  mounted(){
    this.getDataList(1,this.pSize);
  }
}
</script>

 

全部评论