封装 el-pagination 分页组件

最新推荐文章于 2024-10-05 21:23:44 发布

原创最新推荐文章于 2024-10-05 21:23:44 发布 · 577 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

vue+element ui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个基于Vue的自定义分页组件实现方法，通过子组件接收父组件传递的总条数、当前页等参数，并在子组件内部处理分页逻辑。文章详细展示了如何响应分页变化并触发回调，同时提供了中文显示的解决方案。

子组件

<template>
    <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :total="total"
        :layout="layout"
        v-show="total > 0"
    >
    </el-pagination>
</template>

<script>
export default {
    props: {
        total: Number,
        currentPage: Number,
        pageSize: Number,
        layout: {
            type: String,
            default: 'sizes, prev, pager, next, jumper'
        },
    },
    mounted() {
    // 这里是在处理显示的为中文，实际上可以采用上一篇文章的处理方法，使用那种方式这里就没有很大的必要
        if (document.getElementsByClassName('el-pagination__total')[0]) {
            document.getElementsByClassName('el-pagination__total')[0].childNodes[0].nodeValue = `Total ${this.total}`
        }
        if (document.getElementsByClassName('el-pagination__jump')[0]) {
            // *解决 el-pagination 跳转到xx页为中文的问题
            document.getElementsByClassName('el-pagination__jump')[0].childNodes[0].nodeValue = 'Go to'
            document.getElementsByClassName('el-pagination__jump')[0].childNodes[2].nodeValue = ''
        }
    },
    methods: {
        handleCurrentChange(val) {
            const query = {
                pageIndex: val,
                pageSize: this.pageSize
            }
            this.$emit('pagination', query)
        },
        handleSizeChange(val) {
            const query = {
                pageIndex: this.pageIndex,
                pageSize: val
            }
            this.$emit('pagination', query)
        }
    }
}
</script>

父组件的引用

<Pagination
  :total="total"
  :current-page="params.pageIndex"
  :layout="'sizes, prev, pager, next, jumper'"
  @pagination="changePagination">
</Pagination>
// ...
import Pagination from '@/components/Pagination';
// ...
components: { Pagination },
methods: {
    // *分页组件改变
    changePagination(obj) {
      this.params.pageIndex = obj.pageIndex;
      this.getList();
    }
}