elementuiは、ページをリフレッシュするときに現在のページングを保持します.
990 ワード
vueプロジェクトでelementuiコンポーネントを使用するpaginationコンポーネントは、手動でページをリフレッシュすると現在のページがデフォルトの選択効果に戻り、一般的に最初のページに戻ります.リフレッシュ前のページを覚えて、リフレッシュ後のページを変わらないようにするにはどうすればいいですか?
ステータスのローカルストレージを行い、localstorageにページ番号情報を保存することで、ページコンポーネントの初期化時にローカルストレージの情報を取得し、さらに初期化して、保存ステータスをリフレッシュする目的を達成します.に注意
1.vueのvueでページをリフレッシュすると、コンポーネントの状態が初期化し、リフレッシュ前の状態を記録するには、リフレッシュ前にローカルストレージに格納する必要がある.localStorageアクセスデータは文字列形式でアクセスする.注意current-pageのプロパティ値のタイプは、文字列ではなくNumberタイプです.
html:
ステータスのローカルストレージを行い、localstorageにページ番号情報を保存することで、ページコンポーネントの初期化時にローカルストレージの情報を取得し、さらに初期化して、保存ステータスをリフレッシュする目的を達成します.に注意
1.vueのvueでページをリフレッシュすると、コンポーネントの状態が初期化し、リフレッシュ前の状態を記録するには、リフレッシュ前にローカルストレージに格納する必要がある.localStorageアクセスデータは文字列形式でアクセスする.注意current-pageのプロパティ値のタイプは、文字列ではなくNumberタイプです.
html:
export default {
data() {
return {
total: 100,
pageSize: 5,
pageNo: 1,
}
},
created() {
this.pageNo = Number(localStorage.getItem('pagination')) || 1;
this.pageChange(this.pageNo);
},
beforeUpdate() {
localStorage.setItem('pagination', this.pageNo);
},
beforeDestroy() {
localStorage.setItem('pagination', '1');
},
methods: {
pageChange(pageNo) {
this.loading = true;
this.pageNo = pageNo;
}
}
}