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

  • 相关阅读:
    Python日期和时间
    Python实现ATM
    XML的ElementTree解析方式
    Python多线程
    Python文件操作
    Python错误和异常
    Python基础第四课
    html页面引入另一个html页面
    微信直播video安卓端始终在最顶层的解决方法
    设计模式之 外观模式
  • 原文地址:https://www.cnblogs.com/liujiajiablog/p/10373656.html
Copyright © 2011-2022 走看看