element分页组件

模板:

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

<script>
/**
 * 分页组件
 */
export default {
  name: "pagination",
  props: {
    current: {
      default: 1,
    },
    pages: {
      default: 0,
    },
    size: {
      default: 20,
    },
    total: {
      default: 0,
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    /**
     * 分页数量
     */
    handleSizeChange(val) {
      // 导出当前页和值 还有方法
      this.$emit("update:current", 1);
      this.$emit("update:size", val);
      this.$emit("cb");
    },
    /**
     * 当前页
     */
    handleCurrentChange(val) {
      // console.log(val)
      //导出当前页和值 还有方法
      this.$emit("update:current", val);
      this.$emit("cb");
    },
  },
};
</script>

<style lang="scss" scoped>
.my_pagination {
  margin: 20px;
  text-align: right;
}
</style>

//调用

<!--工具条-->
<el-col :span="24" class="toolbar">
  <myPagination
    :current.sync="forms.current"
    :pages.sync="data.pages"
    :size.sync="forms.size"
    :total.sync="data.total"
    @cb="getUsers"//获取列表
  />
</el-col>

<script>

import myPagination from "@/components/pagination";

components: { ,

myPagination 

},

methods: {
//接受select的值{对象}
    selectedProvince(payload) {
        this.forms.studioAreaCode = payload.provinceCode
    },
}

</script>