Vue3+element-ui + TS封装全局分页组件

本文介绍了如何使用Vue3、element-ui和TypeScript封装一个全局分页组件。

环境依赖

在开始之前，你需要安装以下环境：

• Vue3
• element-ui
• TypeScript

组件功能

这个分页组件提供以下功能：

• 支持自定义每页显示条数
• 支持自定义跳转到指定页码
• 支持显示总页数和总条数
• 支持自定义样式

组件实现

分页组件结构

分页组件由以下几部分组成：

<template>
  <div class="pagination">
    <el-pagination
      :total="total"
      :page-size="pageSize"
      :current-page.sync="currentPage"
      :layout="'total, sizes, prev, pager, next, jumper'"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

分页组件属性

分页组件提供以下属性：

属性名	类型	默认值	描述
total	Number	0	总条数
pageSize	Number	10	每页显示条数
currentPage	Number	1	当前页码

分页组件方法

分页组件提供以下方法：

方法名	描述
handleSizeChange	当每页显示条数发生变化时触发
handleCurrentChange	当页码发生变化时触发

分页组件样式

你可以通过修改以下样式来自定义分页组件的样式：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.el-pagination__sizes {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.el-pagination__jump {
  margin-left: 20px;
}

.el-pagination__total {
  margin-right: 20px;
}

使用分页组件

使用分页组件非常简单。你只需要在你的Vue组件中引入我们封装好的Pagination组件，然后在template中使用即可。

<template>
  <div class="page">
    <pagination
      :total="total"
      :page-size="pageSize"
      :current-page.sync="currentPage"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Pagination from '@/components/Pagination.vue'

export default defineComponent({
  name: 'Page',
  components: {
    Pagination,
  },
  setup() {
    const total = ref(1000)
    const pageSize = ref(10)
    const currentPage = ref(1)

    return {
      total,
      pageSize,
      currentPage,
    }
  },
})
</script>

总结

本文介绍了如何使用Vue3、element-ui和TypeScript封装一个全局分页组件。你可以根据自己的需求来修改我们提供的分页组件样式和属性。