Element UI Pagination
https://element.eleme.io/#/en-US/component/pagination
やりたいこと
el-paginationの現在ページ（画面上でfocusされているページ番号）を明示的に指定したい。
ハマったポイント
現在ページを指定しているはずのcurrent-page.syncの変数を変更しても見た目上はページ移動しているように見えてしまう。
例えば、常に1ページ目を表示させたいのに、2とか3とかクリックするとそのページ番号がfocusされてしまいます。
原因
current-pageを変更しても次のDOM書き換えが起こるまで反映されない。
解決策
直接DOMで保持している変数を変更してやる。
$refsでel-paginationを指定して見るとinternalCurrentChangeというプロパティが存在し、これが画面上でfocusされているページ番号のようです。
<el-pagination
ref="pagination"
small
layout="prev, pager, next"
:total="50"
:current-page.sync="currentPage">
</el-pagination>
var Main = {
data () {
return {
currentPage: 1,
internalPage: null
}
},
mounted () {
this.internalPage = this.$refs.pagination
},
watch: {
currentPage () {
/* ここでinternalCurrentPageを変更するとcurrent-pageも見た目も変更される */
this.internalPage.internalCurrentPage = this.currentPage
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
Demo
current-pageが常に1ページの時にinternalCurrentPage変更しない場合とする場合の動きを載せてあります。
https://jsfiddle.net/hsna/fwbmz1vm/