有关element中pagenation组件的二次开发

最新推荐文章于 2024-12-19 15:20:19 发布

lyweb32

最新推荐文章于 2024-12-19 15:20:19 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/m0_45868673/article/details/125291375

这是一个使用Vue.js编写的分页组件示例。组件根据总数据量动态调整页数，并提供页码和每页数量的选择功能。当数据总数或分页设置变化时，会触发回调事件更新页面状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div align="right" style="margin-top: 10px;">
    <el-pagination
      v-if="total>0"
      :page-sizes="pageSizes"
      :page-size="pageObj.pageSize"
      :current-page="pageObj.pageNum"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'PageNation',
  props: {
    total: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      // 可选择的分页数量
      pageSizes: [10,30,50,100]
      pageObj: {
        pageNum: 1,
        // 默认的分页数量
        pageSize: 10
      }
    }
  },
  watch: {
  // 数据总数发生变化 重新触发pageChange事件
    total (newVal, oldVal) {
      const pages = newVal % this.pageObj.pageSize > 0 ? parseInt(newVal / this.pageObj.pageSize) + 1 : newVal / this.pageObj.pageSize
      if (newVal > 0 && pages < this.pageObj.pageNum) {
        this.pageObj.pageNum = 1
        this.$emit('pageChange', this.pageObj)
      }
    }
  },
  methods: {
  // 当前分页和页数发生变化触发pageChange事件
    handleSizeChange (val) {
      this.pageObj.pageSize = val
      this.pageObj.pageNum = 1
      this.$emit('pageChange', this.pageObj)
    },
    handleCurrentChange (val) {
      this.pageObj.pageNum = val
      this.$emit('pageChange', this.pageObj)
    },   
  }
}
</script>

<style scoped>

</style>