element之分页

Posted 2021-02-09 liujiajiablog

一，html

<el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :page-size="pageSize"
                background
                layout="prev, pager, next"
                :total="this.allpage"
                :current-page.sync="currentPage"
                >
</el-pagination>

二，script    

<script>
    export default{

      name:‘app‘,
      data(){
         pageSize:4,  //每页显示多少条
         allpage:‘‘,
         currentPage:1 //页数

      },
      methods:{
          handleCurrentChange(val){
               this.currentPage = val
           this.list(); //显示列表的接口
       },
       /**当前条数***/
     handleSizeChange(size){
             this.pageSize = size;
             this.list();
     },
         /**显示列表接口**/
    list(){
        let obj = this.qs.stringify({
               page:this.currentPage,
               count:this.pageSize
        })
        this.$axios.post(‘l接口名称‘, obj, res => {
            console.log(res);
        }, f => {
        console.log(f)
        }, e => {
        console.log(e)
        }) 
      }

    }
  }
</script>

 图示：

    

 

                          

                                                                                                                                                                                                              --------END