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

  • 相关阅读:
    Java多线程学习---------超详细总结(java 多线程 同步 数据传递 )
    类的高级特性——抽象类
    多态
    继承、继承中的重写
    接口interface、实现接口implements
    “==”运算符与equals()
    静态成员
    对象
    属性和行为(成员变量和成员方法)
    字符串生成器
  • 原文地址:https://www.cnblogs.com/liujiajiablog/p/10373656.html
Copyright © 2011-2022 走看看