詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題
今天遇到一個(gè)小問(wèn)題平時(shí)沒(méi)留意，el-pagination這個(gè)分頁(yè)組件有一個(gè)屬性是current-page當(dāng)前頁(yè)。
今天想在methods里面手動(dòng)修改他綁定的變量從而達(dá)到修改頁(yè)碼的效果，結(jié)果發(fā)現(xiàn)分頁(yè)組件視圖并沒(méi)有渲染，還是停留在原本的頁(yè)碼處。
然后想了想，想起了.sync這個(gè)語(yǔ)法糖，讓數(shù)據(jù)進(jìn)行雙向綁定。
直接上修改的代碼看看
<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
}
具體原因我想了一下，可能是因?yàn)樾薷膖his.currentPage，分頁(yè)組件沒(méi)辦法通知父組件視圖更新，所以添加了.sync修飾符使得子組件能和父組件進(jìn)行溝通，從而實(shí)現(xiàn)雙向綁定，父組件獲取到更新后的值重新渲染頁(yè)面。
element-ui 接口返回有數(shù)據(jù)但是視圖沒(méi)有更新
前言：一般情況下，接口有數(shù)據(jù)返回，但相應(yīng)的視圖不更新，只會(huì)有兩種情況：
1.在這個(gè)數(shù)據(jù)要更新之前有報(bào)錯(cuò)或者有不嚴(yán)謹(jǐn)?shù)呐袛唷?br />
2.vue 對(duì)象、數(shù)組不能深層監(jiān)聽(tīng)。
一、排查有無(wú)不嚴(yán)謹(jǐn)?shù)呐袛嗪蛨?bào)錯(cuò)。
二、vue 對(duì)象不允許在已創(chuàng)建的的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性 。（參考vue官網(wǎng)）
如果非要這么做的話，我們可以使用 this.$set()。
this.$set() 可以接收三個(gè)參數(shù) 1. 要綁字的數(shù)據(jù)。 2. 要添加或修改的屬性名稱。 3. 要賦的值
this.$set(this.projectList, 'projectName', 'chenxuemin')
三、手動(dòng)更新視圖
它可以影響到本實(shí)例及本實(shí)中的 slot 插槽內(nèi)容
this.$forceUpdate() // vm.$forceUpdate()
到此這篇關(guān)于詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題的文章就介紹到這了,更多相關(guān)vue element分頁(yè)組件視圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue使用elementUI組件實(shí)現(xiàn)分頁(yè)效果
- vue使用elementUI分頁(yè)如何實(shí)現(xiàn)切換頁(yè)面時(shí)返回頁(yè)面頂部
- Vue+ElementUI?實(shí)現(xiàn)分頁(yè)功能-mysql數(shù)據(jù)
- Vue2.0+ElementUI+PageHelper實(shí)現(xiàn)的表格分頁(yè)功能
- Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格列表分頁(yè)效果
- Vue中ElementUI分頁(yè)組件Pagination的使用方法
- vue+elementUI組件table實(shí)現(xiàn)前端分頁(yè)功能
- vue+elementui 表格分頁(yè)限制最大頁(yè)碼數(shù)的操作代碼
相關(guān)文章
vue.js中使用微信掃一掃解決invalid signature問(wèn)題(完美解決)
這篇文章主要介紹了vue.js中使用微信掃一掃解決invalid signature問(wèn)題(推薦),本文通過(guò)實(shí)例代碼給出解決方法，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
一次在vue中使用post進(jìn)行excel表下載的實(shí)戰(zhàn)記錄
最近遇到了需求,覺(jué)著有必要給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于一次在vue中使用post進(jìn)行excel表下載的實(shí)戰(zhàn)記錄,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue.js watch經(jīng)常失效的場(chǎng)景與解決方案
這篇文章主要給大家介紹了關(guān)于vue.js watch經(jīng)常失效的場(chǎng)景與解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
解決iview多表頭動(dòng)態(tài)更改列元素發(fā)生的錯(cuò)誤的方法
這篇文章主要介紹了解決iview多表頭動(dòng)態(tài)更改列元素發(fā)生的錯(cuò)誤的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
解決vue-cli創(chuàng)建項(xiàng)目的loader問(wèn)題
下面小編就為大家分享一篇解決vue-cli創(chuàng)建項(xiàng)目的loader問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看看吧2018-03-03
Vue中tab欄切換的簡(jiǎn)單實(shí)現(xiàn)
本文主要介紹了Vue中tab欄切換的簡(jiǎn)單實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
element中Steps步驟條和Tabs標(biāo)簽頁(yè)關(guān)聯(lián)的解決
這篇文章主要介紹了element中Steps步驟條和Tabs標(biāo)簽頁(yè)關(guān)聯(lián)的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Vue3.5中響應(yīng)式Props解構(gòu)的編譯原理
在Vue3.5版本中,響應(yīng)式Props的解構(gòu)功能正式轉(zhuǎn)正,該功能允許即使在解構(gòu)后也不丟失響應(yīng)性,文通過(guò)編譯階段的處理,如何保持解構(gòu)后的props變量仍保持響應(yīng)性,編譯過(guò)程中的defineProps宏函數(shù)處理,通過(guò)AST和上下文操作實(shí)現(xiàn)變量替換,從而讓解構(gòu)后的變量在運(yùn)行時(shí)維持響應(yīng)式狀態(tài)2024-09-09
el-elementUI使用el-date-picker選擇年月
本文主要介紹了el-elementUI使用el-date-picker選擇年月,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02