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

为什么二次封装

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

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

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

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

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

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

子组件代码

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

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

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

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

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

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

// components/page/index.vue
<template>
  <el-pagination
    background
    layout="slot, prev, pager, next"
    :current-page.sync="currentPage"
    :page-size="pageSize"
    prev-text="上一页"
    next-text="下一页"
    :total="count"
    @current-change="handleCurrentChange"
  >
    <span v-html="`共 ${count} 条 &nbsp;&nbsp;&nbsp; 共 ${pages} 页`" />
  </el-pagination>
</template>

这里面通过内置组件 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)
    }
}

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

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

在父组件中的使用

<template>
<div>
    <el-table v-loading="loading" :data="data"/>
    <my-pagination :count="count" @pageEvent="fetchData" />
</div>
</template>
<script>
// 首先，我们先引入这个子组件，并在父组件中注册
import myPagination from '@/components/page/index'
import { getLog } from '@/api/user'
export default {
    // 然后在父组件中注册子组件
  components: { myPagination },
  data(){
	return {
		loading: true,
		page: 1,
		data: [],
		count: 0
	}
  },
  methods: {
    fetchData(currentpage) {
      if (typeof currentpage === 'number') { // 切换页码
        this.page = currentpage
      } else { // 在输入检索条件进行查询的时候，将当前页设置为 1
        this.page = 1
      }
      const { page, searchKey } = this
      getLog({ page, searchKey }).then(r => {
        this.data = r.results
        this.count = r.count
      }).catch().finally(this.loading = false)
    }
  }
}
</script>

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

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

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