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封装一个全局分页组件。你可以根据自己的需求来修改我们提供的分页组件样式和属性。

你可能感兴趣的:(ui,vue.js,elementui)