对elementui中分页组件进行二次封装

为什么二次封装

一般在后台管理项目当中，页面功能涉及到的数据展示的地方会比较多，而其中却少不了表格，分页以及条件检索。如果代码是 copy 来又 copy 去，岂不是很没有技术含量。

而且每个项目的UI设计师，都有自己的想法。

按照我们的直男思想，UI组件的配色啊风格啊那不挺好的嘛～ 你不用设计，我不用改样式，香香～

不过我们也要尊重人家的劳动成果，当设计风格和 ui 框架提供的样式风格或者布局出现了差异，还是要手动的来实现一下

另外一点，就是如果需求改一点东西，假如你的分页真的是 copy 来 copy 去的，那恭喜你，有的改了。

基于以上的种种原因吧，elementui 的分页组件的二次封装就应时而生了。

子组件代码

在分页子组件中，我们只需要关注三个地方

• 当前页是第几页，
• 共有多少页，
• 每页显示多少条数据

很显然，默认的当前页肯定是第一页，

每页显示多少条数据，需要用户自己来定义，用户没有选择的话我们给一个默认值

而共有多少页，需要看后台返回的数据总数量，除以每页显示的数据量 简单来说，就是 Math.ceil(count / pageSize)

根据 elementui 的分页，我们可以这样定义自己的分页组件代码

// components/page/index.vue

这里面通过内置组件 slot 来定义一些个人风格的展示效果，然后我们在 script 中定义子组件需要的参数，这里需要两个参数

1. 总的数据量
2. 每页显示的条目数量

props: {
    count: {
      type: Number,
      default: 0
    },
    pageSize: {
        type: Number,
        default: 10
    }
},

其中的 count 来源于接口API返回的总数据量，而 pageSize 就是我定义的每页显示的数据量，用户可以自己根据需要来设置，默认是显示10条数据

然后利用计算属性，来计算共有多少页

computed: {
    pages() {
      return Math.ceil(this.count / this.pageSize)
    }
},

同时，我们要需定义当前的默认的页码

data() {
    return {
      currentPage: 1  // 默认当前页显示第一页
    }
},

最后来定义翻页事件，这个事件在用户点击具体的页码，或者上一页、下一页的按钮来触发

因为我们在绑定currentPage 用了 .sync 修饰符，所以这个属性会自动接收更新后的值，就不需要我们再做什么赋值操作了

在事件内部，通过$emit这个方法，我们将当前跳转的页码传递给父组件用于获取更新后的数据

methods: {
    handleCurrentChange(page) {  // 点击页码事件，通知父组件
      this.$emit('pageEvent', this.currentPage)
    }
}

这样，一个子组件就完成了。

下面看看如何在父组件中使用。

在父组件中的使用

在多个父组件中，我们都可以以同样的方式引入注册并使用。

如果后面有任何的需求更改，我们直接更改 /components/page/index.vue 就可以了，而不必在每个使用的地方都修改一次。

原文链接：基于 elementui 分页进行二次封装 - 掘金 (juejin.cn)