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();
}