現在element-uiを使ってページングを作成しようとしているのですが、どうしたら取得したデータとpaginationタグを紐付けて正常に動作させるのか方法がわかりません。
やりたいこと
・総件数を表示する
・現在表示している場所を表示する
・一つのページに約(例)100件
このうち「現在表示している場所を表示する」は、el-paginationを少しカスタマイズしればできました。
できていないこと
・paginationと取得したデータが同期していない
・例えば2(次のページ)を押しても1ページ目と何も変わらない
pagination.vue <template> <el-pagination :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :page-sizes="pageSizes" :total="total" v-bind="$attrs" @size-change="handleSizeChange" @current-change="handleCurrentChange" </template> <script lang="ts"> import { Component, Prop, Vue } from "vue-property-decorator"; import { scrollTo } from "@/utils/scroll-to"; @Component({ name: "Pagination", }) export default class extends Vue { @Prop({ required: true }) private total!: number; @Prop({ default: 1 }) private page!: number; @Prop({ default: 20 }) private limit!: number; @Prop({ default: () => [60] }) private pageSizes!: number[]; @Prop({ default: "total, sizes, prev, pager, next, jumper" }) private layout!: string; get currentPage() { return this.page; } set currentPage(value) { this.$emit("update:page", value); } get pageSize() { return this.limit; } set pageSize(value) { this.$emit("update:limit", value); } handleSizeChange(value: number) { this.$emit("pagination", { page: this.currentPage, limit: value }); } handleCurrentChange(value: number) { this.$emit("pagination", { page: value, limit: this.pageSize }); } } </script>
index.vue <template> <pagination :page.sync="listQuery.page" :limit.sync="listQuery.limit" :total="20" layout="prev, pager, next" @pagination="getList" /> </template> <script lang="ts"> @Component({ name: "hogehoge", components: { Pagination, }, }) export default class extends Vue { private total = 0; private listQuery = { page: 1, limit: 5, }; private data: hoge[] = []; created() { this.getList(); } private async getList() { try { //API側で数千件のデータをselect * from hogeで取得している this.data = await api取得関数() as hoge[]; } catch (error) { エラー処理 } } } </script>
色々と、省略はしてりとりあえず値を入れている等の箇所もありますが、必要なとこだけ掲載しました。
あなたの回答
tips
プレビュー