VUE+ElementUI实现前端分页

VUE_ElementUI前端分页

---

参考了这位大佬的博客（https://blog.csdn.net/qq_42707611/article/details/102621081），经过自己的修改，与elementui分页插件相结合，实现了前端组件分页

效果图如下：

每页几条，前往几页，均可使用。下面直接上代码

一、定义变量

data(){
    return {
        // 权限列表，向后台请求数据获取，看起来格式应该是这样的[{},{},{}]
        rightsList:[],
        // 分页数据,这里用来保存每页切割后的数据
        // 看起来格式是这样的[[{},{},{}],[{},{},{}]]
        // 数组内套数组，每个数组就是一页数据
        totalPageData: [],
        // 共几页
        pageNum:1,
        // 每页显示数量
        pageSize:5,
        // 当前显示页码
        currentPage:1,
        // 总共多少条数据
        total:1,
        // 当前要显示的数据
        dataShow:[]
    }
}

二、创建方法

1.初始化数据

// 如果想要组件在创建时就赋予数据，那么就应该在created生命周期调用
created() {
    // 调用Method封装好的方法
    this.getRightsList();
}

2.methods属性定义的方法

• 定义获取列表数据的方法

getRightsList(){
    // 获取列表数据
    this.$axios.get('/rights/list')
        .then(res => {
        // 处理结果，根据自己业务接口返回结构赋值数据
        if(res.data.meta.status === 200){
            console.log('数据总数:',res.data.data.length);
            this.total = res.data.data.length;
            this.rightsList = res.data.data;
            // 计算页数
            this.calcPageData();
            return;
        }
        this.$message.error('权限列表加载失败');
    }).catch(res =>{
        this.$message.error('权限列表加载异常,原因是:'+res.data.meta.msg);
    });
}

• 计算页数方法

calcPageData(){
    // 计算页数(根据后台数据的条数和每页显示数量算出一共几页,得0时设为1)
    if(this.rightsList.length > 1){
        this.pageNum = Math.ceil(this.rightsList.length / this.pageSize) || 1;
        console.log('总页数:',this.pageNum);
    }
    // 数据分组
    for (let i = 0; i < this.pageNum; i++) {
        // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
        // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
        this.totalPageData[i] = this.rightsList.slice(this.pageSize * i, this.pageSize * (i + 1));
    }
    // 获取到数据后显示第一页内容,数组下标是从0开始的，这里一定要减去1，不然会丢失一组数据
    this.dataShow = this.totalPageData[this.currentPage - 1];
    console.log(this.dataShow);
}

• 定义每页条数发生变化处理方法，与el分页组件绑定的方法

 // 每页条数发生变化
handleSizeChange(newPageSize) {
    this.pageSize = newPageSize;
    // 重新计算页数并分组
    this.calcPageData();
}

• 定义当前页码发生变化处理方法，与el分页组件绑定的方法

// 当前页码发生变化
handleCurrentChange(newPageNum) {
    console.log('当前页码:',newPageNum);
    this.currentPage = newPageNum;
    // 这里仍然不要忘记减去1
    this.dataShow = this.totalPageData[newPageNum - 1];
}

三、页面结构

        <div class="common-data">
            <el-table :data="dataShow" border width="100%" stripe>
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template scope="scope">
                        <span>{{(currentPage - 1) * pageSize + scope.$index + 1}}span>
                    template>
                el-table-column>
                <el-table-column prop="authName" label="权限名称">el-table-column>
                <el-table-column prop="path" label="路径">el-table-column>
                <el-table-column prop="level" label="权限等级">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.level === '0'">一级el-tag>
                        <el-tag type="success" v-else-if="scope.row.level === '1'">二级el-tag>
                        <el-tag type="warning" v-else>三级el-tag>
                    template>
                el-table-column>
            el-table>
            <div class="page">
                <el-pagination @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[5, 10, 15, 30]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total" background>
                el-pagination>
            div>
        div>