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();
    }
    
  • 相关阅读:
    元素查找
    合并果子 2004年NOIP全国联赛普及组
    队列练习1,2,3
    山峰
    栈练习1,2,3
    天使之城
    括号序列
    布尔表达式
    逆波兰表达式
    旅行家的预算 1999年NOIP全国联赛普及组NOIP全国联赛提高组
  • 原文地址:https://www.cnblogs.com/newsea/p/8478212.html
Copyright © 2011-2022 走看看