vue+element封装分页组件＜每页条数由用户自定义＞_自定义条数分页 elementui

背景：因为当前项目主要是表格文件和数据的一个显示，所以大量的用到分页功能，思前想后决定写一个分页组件，方便美观。因为前端人员不是我自己，加上产品的建议，最后决定分页写定每页二十天条数据。分页每页多少条由用户自定义<vue2.0>

因为公司的数据量比较大，需要做批量处理的地方比较多，所以有时会根据情况自定义一些东西
大家也知道element的分页组件可以前端自己定义好一个数组去选择规格范围的每页条数，但是没有办法用户自定义输入任意数值。所以我这里就在抽取的全局分页组件里面多增加了一个参数和触发事件来达到公司的需求。
静态效果：<用户在条数/页里面输入自定义的数字，表格就可以自定义显示用户自定义每页显示的条数>

1. 首先在项目的根目录下创建可复用组件
   
   在components里面创建需要的组件
2. 在组件里写入代码主要是涉及到父传子和子传父，因为刚开始写可复用封装组件，所以没敢写的太复杂

<template>
  <!-- 全局分页功能 -->
  <div class="content">
    <el-pagination
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      background
      small
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
    />
    <div class="edit">
      <el-input v-model="pageSizes" placeholder="条数/页" />
      <el-button type="primary" @click="editPageSizes">应用</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PaginationPaging',
  props: {
    total: {
      type: Number, // 总条数
      default: 0
    },
    currentPage: {
      type: Number, // 当前页
      default: 1
    },
    pageSize: {
      type: Number, // 每页的条数
      default: 20
    }
  },
  data() {
    return {
      pageSizes: ''
    }
  },
  methods: {
    // 当前页事件
    handleCurrentChange(val) {
      this.$emit('currentChange', val)
    },
    // 用户自定义每页条数需要的触发事件
    editPageSizes() {
      this.$emit('editPagesizes', Number(this.pageSizes))
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: flex-end;
  
  ::v-deep.edit {
    height: 30px;
    width: 120px;
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    justify-content: space-around;
    .el-input__inner {
      height: 26px !important;
      height: 30px;
      width: 56px;
      text-indent: 0em;
      font-size: 12px;
      padding: 0;
      text-align: center;
    }
    .el-button {
      height: 26px;
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

3. 写完组件之后，当然是去页面试一试了，试用之前先要在main.js里全局注册一下哦

// 引入分页组件
import Pagination from '@/components/Pagination'
// 注册分页组件
Vue.component('pagination', Pagination)
1
2
3
4

4. 去测试一下我们写的组件的效果吧

<template>
  <!-- 分页功能
	:total="pageTotal"为总条数
	:current-page="pageNo"当前页
	:page-size="pageSize"每页多少条
	@currentChange   当前页事件
	@editPageSizes   每页多少条事件
  -->
  <pagination :total="pageTotal" :current-page="pageNo" :page-    size="pageSize" @currentChange="handleCurrentChange" @editPagesizes="editPageSizes"/>
</template>
<script>
export default { 
  data() {
    return {
      pageNo: 1,
      pageSize: 20,
      pageTotal: 0,
    }
  },
  methods: {
    // 修改当前页事件
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo
    },
    // 修改分页的每页的条数
    editPageSizes(val) {
      this.pageSize = val
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

5. 然后就可以肆无忌惮的开始自定义分页了哈哈哈哈哈哈