VUE ---素子EL-ページネーションパッケージアセンブリ]タブ

デマンド説明：一般的なコンポーネントとしてパッケージページングコンポーネントは、ページ番号の参照]タブに組み込むことができます。

ソリューション：

ページングコンポーネントはPage.vue] [（サブアセンブリ）、ページ2つの親要素、それぞれPageOne.vue []および[] PageTwo.vueを想定しています

（1）PageOne.vue（親要素）とPageTwo.vue（親要素）が必要Page.vue（サブアセンブリ）の合計]の総数に伝達され、交差値が小道具を達成[方法]

•       父组件：【<ページ：合計= "page_total"> </ページ>】
•       サブコンポーネント[小道具：[ "総"]]

（2）サブアセンブリ親要素[]とのpageSize currentPageにこのページ] [この使用$ EMIT（「機能」、PARAM）のページ数に渡す必要がある;    //親アセンブリ前記関数定義された関数、必要にPARAMパラメータを渡します。 

•       父组件：【<ページ：合計= "page_total" @ pageChange = "pageChange"> </ページ>】
•        サブコンポーネント：[この$ EMIT（ "pageChange"、this.page）;.]

コードは以下の通りであります：

【】Page.vue

<template>
  <div class="page">
    <el-pagination
      small
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: ["total"],
  data() {
    return {
      // 页码参数
      page: {
        currentPage: 1,
        pageSize: 10
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      console.log(`每页 ${this.page.pageSize} 条`);
      this.$emit("pageChange", this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      console.log(`当前页: ${this.page.currentPage}`);
      this.$emit("pageChange", this.page);
    }
  }
};
</script>

<style lang="less">
</style>

【】PageOne.vue

<template>
  <div class="pageone">
    <page :total="page_total" @pageChange="pageChange"></page>
  </div>
</template>
<script>
import Page from "../components/Page";
export default {
  data() {
    return {
      page_total: 100,
      page_index: 1, //页码
      page_size: 20 //每页展示条数
    };
  },
  components: {
    page: Page
  },
  methods: {
    pageChange(item) {
      console.log("pageone:", item);
      this.page_index = item.currentPage;
      this.page_size = item.pageSize;
      console.log(`每页展示${this.page_size}条，当前为${this.page_index}页`);
      //   this.query(); //页面改变后通过query()方法向后台请求数据渲染页面
    }
  }
};
</script>
<style lang="less">
</style>

【】PageTwo.vue同】【PageOne.vue