今天遇到一個小問題平時沒留意，el-pagination這個分頁元件有一個屬性是current-page當前頁。

今天想在methods裡面手動修改他繫結的變數從而達到修改頁碼的效果，結果發現分頁元件檢視並沒有渲染，還是停留在原本的頁碼處。

然後想了想，想起了.sync這個語法糖，讓資料進行雙向繫結。

直接上修改的程式碼看看

<el-pagination
  :current-page.sync="currentPage"
  :page-sizes="[10,30,50]"
  :page-size="pageSize"
  :total="total"
  layout="total,sizes,prev,pager,next,jumper"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>
refresh () {
 this.handleCurrentChange(1)
 this.currentPage = 1
}

具體原因我想了一下，可能是因為修改this.currentPage，分頁元件沒辦法通知父元件檢視更新，所以添加了.sync修飾符使得子元件能和父元件進行溝通，從而實現雙向繫結，父元件獲取到更新後的值重新渲染頁面。

element-ui 介面返回有資料但是檢視沒有更新

前言：一般情況下，介面有資料返回，但相應的檢視不更新，只會有兩種情況：
1.在這個資料要更新之前有報錯或者有不嚴謹的判斷。
2.vue 物件、陣列不能深層監聽。

一、排查有無不嚴謹的判斷和報錯。

二、vue 物件不允許在已建立的的例項上動態新增新的根級響應式屬性 。（參考vue官網）
如果非要這麼做的話，我們可以使用 this.$set()。

this.$set() 可以接收三個引數 1. 要綁字的資料。 2. 要新增或修改的屬性名稱。 3. 要賦的值

this.$set(this.projectList,'projectName','chenxuemin')

三、手動更新檢視

它可以影響到本例項及本實中的 slot 插槽內容

this.$forceUpdate() // vm.$forceUpdate()

到此這篇關於詳解vue修改elementUI的分頁元件檢視沒更新問題的文章就介紹到這了,更多相關vue element分頁元件檢視內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！