zoukankan      html  css  js  c++  java
  • element之分页

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

  • 相关阅读:
    硬件IC汇总
    stm8s103调试注意点
    感悟短句
    USB接口
    液晶屏驱动注意
    四数之和
    所有奇数长度子数组的和
    秋叶收藏集
    删除中间节点
    组合总和
  • 原文地址:https://www.cnblogs.com/liujiajiablog/p/10373656.html
Copyright © 2011-2022 走看看