vue分页之el-pagination 用法

最新推荐文章于 2025-03-10 23:58:06 发布

code12313

最新推荐文章于 2025-03-10 23:58:06 发布

阅读量4.5k

点赞数 2

分类专栏： Vue学习笔记文章标签： vue.js vue 分页

本文链接：https://blog.csdn.net/code12313/article/details/119948798

版权

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

8 篇文章

订阅专栏

标签属性

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