利用element的分页封装的分页器

<template>

  <div class="m_t">

    <!-- 分页器 -->

    <el-pagination

      class="FenYeQi"

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page="currentPage4"

      :page-sizes="[5, 10, 20, 50, ChaXUn.Zhong]"

      :page-size="ChaXUn.pageSize"

      layout="total, sizes, prev, pager, next, jumper"

      :total="ChaXUn.Zhong"

    >

    </el-pagination>

  </div>

</template>

<script>

export default {

  name: "",

  props: {

    ChaXUn: {

      type: Object,

      required: true,

    },

  },

  data() {

    return {

      currentPage4: 1,

    };

  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {

    handleSizeChange(val) {

      this.$emit("Tiao", val);

    },

    handleCurrentChange(val) {

      this.$emit("Ye", val);

    },

  },

  watch: {},

};

</script>

<style scoped lang="less">

.m_t {

  text-align: center;

  margin-top: 15px;

}

::v-deep {

  .FenYeQi {

    .el-pagination button,

    .el-pagination span:not([class*="suffix"]) {

      display: inline-block;

      font-size: 18px;

      min-width: 35.5px;

      height: 28px;

      line-height: 28px;

      vertical-align: top;

      box-sizing: border-box;

    }

  }

  .el-input__inner {

    -webkit-appearance: none;

    background-color: #fff;

    background-image: none;

    border-radius: 4px;

    border: 1px solid #dcdfe6;

    box-sizing: border-box;

    color: #606266;

    display: inline-block;

    font-size: inherit;

    height: 30px !important;

    line-height: 30px !important;

    outline: 0;

    padding: 0 15px;

    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

    width: 100%;

  }

}

</style>

使用示例：