标签：pageIndex vue pageSize val default element 组件 type

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/

标签：pageIndex,vue,pageSize,val,default,element,组件,type
来源： https://www.cnblogs.com/webSnow/p/15744828.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。