Vue 中基于element-ui二次封装Pagination分页组件

Vue 中基于element-ui二次封装Pagination分页组件

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[1, 2, 5, 10]"
    :page-size="pageSize"
    :layout="layout"
    :total="total"
  >
  </el-pagination>
</template>

<script>
export default {
          
   
  props: {
          
   
    currentPage: {
          
   
      type: [String, Number],
      default: 1,
    },
    total: {
          
   
      type: [String, Number],
      default: 0,
    },
    pageSizes: {
          
   
      type: Array,
      default: () => [10, 15, 30, 50],
    },
    pageSize: {
          
   
      type: [String, Number],
      default: 10,
    },
    // prev表示上一页，next为下一页，pager表示页码列表,jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量
    // total, sizes, prev, pager, next, jumper
    layout: {
          
   
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
  },
  data() {
          
   
    return {
          
   };
  },
  methods: {
          
   
    handleSizeChange(val) {
          
   
      // 子组件向父组件传值
      this.$emit("sizeChange", val);
    },
    handleCurrentChange(val) {
          
   
      this.$emit("currentChange", val);
    },
  },
};
</script>
<style lang="less" scoped>
.page {
          
   
  text-align: center;
  color: #409eff;
}
</style>

使用组件

<template>
 <Pagination @sizeChange=handleSizeChange 
    :pageSize=pageSize 
    @currentChange=handleCurrentChange
      :currentPage=currentPage :total=total></Pagination>
</template>

<script>
  import qs from qs
  import Pagination from @/components/utils/Pagination

  export default {
          
   
    components: {
          
   
      Pagination,
    },
    data() {
          
   
      return {
          
   
        globalList: [],
        // 当前页数量
        pageSize: 1,
        // 当前页
        currentPage: 1,
        // 总数
        total: 1,
      }
    },
    created() {
          
   
      this.getNewsList(this.tag)
    },

    methods: {
          
   
      getNewsList(tagName) {
          
   
        console.log(tagName)
        const param = {
          
   
          page: this.currentPage,
          size: this.pageSize,
        }
        this.$axios({
          
   
          url: "/api/art/findTag", //请求地址
          method: "post", //请求方式
          data: qs.stringify(param)
        }).then(res => {
          
   
          // ok表示请求成功的数据
          console.log(res)
          // 把请求到的数据给testDatas数组
          this.globalList = res.data.data.list
          // 当前页数
          this.currentPage = res.data.data.pageNum
          // 当前页数量
          this.pageSize = res.data.data.pageSize
          // 分页总数
          this.total = res.data.data.total
          console.log(JSON.stringify(res.data.data.total))
        });
      },
      // 监听 pagesize改变的事件
      handleSizeChange(newSize) {
          
   
        //  console.log(`每页 ${val} 条`);
        console.log(newSize)
        this.pageSize = newSize
        this.getNewsList()
      },
      // 监听 页码值 改变事件 第几页
      handleCurrentChange(newSize) {
          
   
        //  console.log(`当前页: ${val}`);
        console.log("111:" + newSize)
        this.currentPage = newSize
        this.getNewsList()
      },
    },
  }
</script>