vue封装Element的分页

封装的组件代码

<template>
  <div>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPageL" :page-sizes="pageSizesL" :page-size="pageSizeL" layout="total, sizes, prev, pager, next, jumper" :total="totalL">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    currentPage: Number,
    total: Number,
    pageSizes: Array,
    pageSize: Number
  },
  data() {
    return {
      currentPageL: this.currentPage, //默认第一页
      totalL: this.total, //总条数
      pageSizesL: this.pageSizes, //每页展示多少条
      pageSizeL: this.pageSize, //默认第一页展示10条
    };
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      let path = this.$route.fullPath;
      let query = this.$route.query;
      let size = {
        size: val
      };
      let newQuery = this.$Method.NewQuery(query, size);
      this.$router.push({ path: path, query: newQuery });
    },
    handleCurrentChange(val) {
      let path = this.$route.fullPath;
      let query = this.$route.query;
      let size = {
        page: val
      };
      let newQuery = this.$Method.NewQuery(query, size);
      this.$router.push({ path: path, query: newQuery });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #cc4455;
}
</style>

 调用的组件：

<template>
  <div class="hello">
    <p>{{new Date() | moment("YY-MM-DD HH:mm:ss")}}</p>
    <i class="iconfont icon-gouwuche"></i>
    <el-button type="primary">主要按钮</el-button>
    <PageSize :currentPage='currentPage' :total='total' :pageSizes='pageSizes' :pageSize='pageSize' />
  </div>
</template>

<script>
import PageSize from "./common/PageSize.vue";
export default {
  name: "HelloWorld",
  components: {
    PageSize: PageSize
  },
  data() {
    return {
      msg: "helloworld*****",
      currentPage: 1, //默认第一页
      total: 80, //总条数
      pageSizes: [10, 20, 50, 100, 200], //每页展示多少条
      pageSize: 10 //默认第一页展示10条
    };
  },
  mounted() {},
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
</style>

路由query改变原始对象，避免路由不跳转及不更新

function (query, newQuery) {
    return Object.assign({}, query, newQuery)
  }

仅供参考，欢迎指出改进。。。