Vue Element Tabe Pager 分页方案

2024-10-11 03:06:31

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

分析

有以下方式触发查询:

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

}

最新文章

热门文章