vue フロントエンド プロジェクトは、すべてのページで呼び出される要素 UI に基づいてページング コンポーネントをカプセル化します。

ページング コンポーネントはフロントエンド プロジェクトの開発で非常に頻繁に使用され、ほぼすべてのシステムに関係します。ページング コンポーネントをカプセル化すると、開発時間を節約し、開発効率を向上させることができます。

この例では、ElementUI の Pagination コンポーネントを使用し、それをデータにバインドします。API から総ページ数と現在のページ番号を取得したり、各ページに表示される番号を構成可能なプロパティとして設定したりするなど、ニーズに応じてこれらのデータをカスタマイズできます。handleCurrentChange メソッドでは、新しいページ番号に従ってデータを更新できます。

以下は、カプセル化ページネーション コンポーネントのコードです。

新しい MyPagination.vue ファイルを作成します

<template>
  <!--  分页组件封装-->
  <div class="TablePage">
    <el-pagination
      :current-page="pageData.page"
      :page-size="pageData.pageSize"
      :total="pageData.total"
      @prev-click="onPrevBut"
      @next-click="onNextBut"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "TablePage",
  props: {
    pageData: Object,
    fatherPage: {
      type: Function,
      default: null,
    },
  },
  },
  methods: {
    // 上一页
    onPrevBut (page) {
      this.parent(page)
    },
    // 下一页
    onNextBut (page) {
      this.parent(page)
    },
    // 给父组件传值
    parent (page) {
      this.fatherPage(page)
    },
  },
};

このコンポーネントを使用する場合は常に、このコンポーネントをインポートしてタグとして使用します。

<template>
  <div>
    其它代码。。。
   <my-pagination :page-data="pageData" :father-page="fatherPage" ></my-pagination>
  </div>
</template>
<script>
import my-pagination from '../components/MyPagination.vue/'  //这里路径请以实际的文件的路径为准
export default{
components:{my-pagination},
data(){
    return {
 pageData: {
        // 页码
        page: 1,
        // 一页的数据个数
        pageSize: 10,
        // 总数
        total: 0
      },
},
methods:{

/*

在这里还要写上API请求函数，也就是从后端返回的你需要渲染的数据

例如请求的结果为res
 this.pageData.total = res.length
*/
 fatherPage (e) {
      this.pageData.page = e
    },

}
}

</script>