vue+element-ui实现列表分页功能

原创已于 2022-08-04 19:02:43 修改 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

于 2020-08-06 16:08:23 首次发布

Vue 同时被 2 个专栏收录

198 篇文章

订阅专栏

element-ui

20 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Element UI框架实现用户列表数据的分页功能，包括页面布局、数据绑定及分页逻辑处理。

vue后台系统项目使用element-ui框架实现列表分页功能，获取用户列表数据

效果：

<div class="deit">
    <div class="crumbs">
     
        <div class="cantainer">
                    <el-table style="width: 100%;" :data="userList" align='center'>
                        <el-table-column type="index" width="50">    
                        </el-table-column>
                        <el-table-column label="日期" prop="date" width="180">    
                        </el-table-column>
                        <el-table-column label="姓名" prop="name" width="180">    
                        </el-table-column>
                        <el-table-column label="邮箱" prop="email" width="180">    
                        </el-table-column>
                        <el-table-column label="地址" prop="address" width="200">    
                        </el-table-column>    
                    </el-table>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5, 10, 20, 40]" //下拉框展示的分页条数
                            :page-size="pagesize"         //显示当前行的条数
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">//数据总数userList.length
                    </el-pagination>
        </div>
    </div>
  </div>

需要data中定义，userList接受接口返回的数据

data () {
      return {
                currentPage:1, //当前页
                pagesize:10,//分页的数据
                total: 0, //总页数
                userList: []
      }
  },

created() {
        this.handleUserList()
    },
    methods: {
        handleSizeChange(val) {
                this.pagesize = val;
                this.handleUserData();
        },
        handleCurrentChange(val){
            this.currentPage = val;
            this.handleUserData();
        },
        handleUserData() {
            //接口请求，传递分页参数
                let params = {
                        pageSize:this.pageSize,
                        currentPage:this.currentPage
                        //pageNum:this.pageNum
                }
            getUserList(params).then(res => {
                this.userList = res.data;
                this.total = res.total;
                //this.total = res.data.length;
            })
        }
    }