vue分页之el-pagination 用法

标签属性

<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>