1. 程式人生 > 實用技巧 >element UI分頁元件bug

element UI分頁元件bug

原因有可能是點選搜尋的時候在搜尋裡面通過程式碼去改變了current-page讓分頁回到第一頁,但有可能element內部的頁碼資料未改變,因此當在此點選第二頁的時候相當於頁碼未發生改變,current-change事件不觸發(純屬個人想法)

解決方法
給分頁加上一個控制顯示和隱藏的變數 v-if="pageshow"

 <div class="pagination" v-if="pageshow">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="cur_page"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="recordsTotal">
    </el-pagination>
</div>
在搜尋改變頁碼的時候加上如下程式碼

this.cur_page = 1;//cur_page 當前頁
this.getData();//獲取資料
this.pageshow = false;//讓分頁隱藏
this.$nextTick(() => {//重新渲染分頁
    this.pageshow = true;
});
也就是重新去渲染一遍分頁元件,問題解決