current-page是Element-ui的pagination組件的當(dāng)前頁數(shù)設(shè)置捻浦。需求是返回這個頁面的時候需要回到之前的頁碼數(shù)蔚袍。然而當(dāng)設(shè)置current-page獲取表格之后卻無法正確渲染帚豪。
page確實(shí)是5六水，但顯示卻不是
代碼
<template>
<div>
<el-pagination :total="total"
:size='20' :current-page="filter.page"></el-pagination>
<div>{{filter}}</div>
</div>
</template>
<script>
export default {
name: 'Test',
data () {
return {
filter: {},
total: 0
}
},
mounted () {
this.filter.page = 5
this.change()
},
methods: {
change () {
// 模擬數(shù)據(jù)返回
setTimeout(() => {
this.total = 100
}, 1000)
}
}
}
</script>
原因
-
pagination組件會根據(jù)total重新計(jì)算page是在總頁碼之內(nèi),默認(rèn)是1
初始渲染
這個時候傳值是5桨啃，但total還沒改變踩蔚，所以傳值無效不瓶。 - 那在獲取到total之后再次賦值可以嗎？
change () {
// 模擬數(shù)據(jù)返回
setTimeout(() => {
this.total = 100
this.filter.page = 5 // 再次賦值
}, 3000)
}
很可惜灾杰，還是不行
vue也判定為沒有改變艳吠，所以不會重置麦备。這里哪怕改變對象的指向，只要屬性和屬性值沒變昭娩，依然不會造成視圖更新凛篙。
解決方法：
mounted的時候另取變量存儲page的值進(jìn)行表格數(shù)據(jù)獲取，在獲取到total之后進(jìn)行page更新
