vue分页之el-pagination 用法

最新推荐文章于 2026-06-15 08:12:10 发布

原创最新推荐文章于 2026-06-15 08:12:10 发布 · 4.6k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #vue 分页

Vue学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用Element UI的分页组件，通过`handleSizeChange`和`handleCurrentChange`方法实现每页数据量的动态调整，并结合axios获取接口数据，实时更新表格内容。

标签属性

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