vue+element分页组件封装成公共组件

vue+element分页组件封装成公共组件


1.首先定义一个分页子组件

 <el-pagination
      :background="background"
      :current-page.sync="currentPage"  //第几页
      :page-size.sync="pageSize"  //每页显示几条数据
      :layout="layout"
      :page-sizes="pageSizes"  //可选的每页多少条数据
      :total="total"
      @size-change="handleSizeChange"  //当前页多少条数据的方法
      @current-change="handleCurrentChange" //显示第几页
    />

2.定义props 接受父组件传过来的值 代码如下：

props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1  //默认第一页
    },
    limit: {
      type: Number,
      default: 20  //默认每页20条
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]  //默认显示可选的每页多少条数据
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },

3.在定义2个计算属性 一个为当前页多少条数据，一个为第几页，因为会改变这2个值 所以设置了set属性

computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)  //改变的第几页的值赋值给父组件
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val) //改变的当前页几条数据的值赋值给父组件
      }
    }
  },

4.在定义2个方法 一个改变页数，一个当前页多少条数据

methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { pageIndex: 1, pageSize: val })
     
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { pageIndex: val, pageSize: this.pageSize })
      
    }
  }

5.然后在父组件 注册 引用

import Pagination from '@/components/Pagination'

export default {
    components: {  Pagination},
    data() {
      return {
        length: 0,
        pageSize: 20, //要传过去的数据 每页多少条数据
        pageIndex: 1, //要传过去的数据 第几页
      }
    },


6.父组件 使用子组件 并接受子组件传回的事件

<pagination v-show="length>0" :total="length" :page.sync="pageIndex" 
 :limit.sync="pageSize"  @pagination="handlePageChange"/>

 handlePageChange(data) {
        this.pageIndex = data.pageIndex
        this.pageSize = data.pageSize
        this.loadData()//这是重新获取数据的方法
      }

最后封装的公用分页组件就好了 就可以在任何页面使用这个分页组件了
————————————————
版权声明：本文为CSDN博主「渐离~~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zo429515/article/details/105359576/
vue+element分页组件封装成公共组件

推荐阅读
