zoukankan      html  css  js  c++  java
  • Vue Element Tabe Pager 分页方案

    表格和分页分离的,但是使用中,却是结合在一起的.

    分析

    有以下方式触发查询:

    • mounted 加载数据.
    • 查询按钮 加载数据.
    • pager 变化加载数据
    • 加载数据函数: loadData

    问题

    • mounted 调用 page =1; loadData
    • 查询数据,调用 page = 1 ; loadData();
    • pager 变化加载数据 :currentPage.sync ="page" @current-change="listOrder()"

    先点击 查询,再点第2页, 再点查询,会执行两次 loadData
    因为查询数据指定了 page=1 , 会触发 @current-change , 加上本身触发的 loadData , 共两次 loadData

    解决问题

    • 初始化 data

    data(){
    page:1,
    total:0
    }

    • mounted 写法:

    this.loadData(1);

    • 查询写法:

    total=0; loadData(1);

    • 分页控件:
    <el-pagination layout="prev, pager, next" v-if="total>10"
                             :total="total" :currentPage.sync="page" @current-change="loadData" >
    </el-pagination>
    
    • loadData
    loadData(page){ 
          this.page = page;
    
           ajax();
    }
    
  • 相关阅读:
    angularjs 学习理解
    setTimeout和setInterval
    c# 数组
    c# 枚举enum
    T_SQL 字符串函数
    T_SQL 日期函数
    T-SQL函数类型——系统函数
    SqlServer 删除日志
    ASP.NET中JSON的序列化和反序列化
    jquery 选择器
  • 原文地址:https://www.cnblogs.com/newsea/p/8478212.html
Copyright © 2011-2022 走看看