Element UI实现分页效果

最新推荐文章于 2024-12-11 14:26:02 发布

化而为鸟

最新推荐文章于 2024-12-11 14:26:02 发布

阅读量722

点赞数

CC 4.0 BY-SA版权

分类专栏： UI框架功能实现

本文链接：https://blog.youkuaiyun.com/HEWNCP/article/details/103685387

UI框架功能实现专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在项目中利用Element UI库实现分页功能，重点提及了data属性的设置以及分页组件的代码应用，通过实例展示了Element UI分页效果的实现步骤。

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

首先，分页的实现要关联table表

<el-table 
:data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
>

data这句必须要写（固定写法）

分页效果代码直接复制elementUI

<el-pagination>
</el-pagination>

这个标签是分页标签

<!-- :total="userList.length">  这是显示总共有多少数据--> 注：userList是data中table表单里面的数据

 <!-- :page-size="pagesize"     显示当前行的条数 -->
 
 <!-- :page-sizes="[5, 10, 15, 20]" 这是下拉框可以选择的，每选择一行，要展示多少内容 -->
 
 :current-page="currentPage"      currentPage是要在data中定义的变量     表示初始页为第几页
 
 :page-size="pagesize"    pagesize也是要在data中定义的变量       表示每页展示几条数据，超出下一页显示

废话不多说直接看代码

<template>
    <div class="deit">
        <div class="crumbs">
            <div class="cantainer">
                <el-table style="width: 100%;"
                stripe
                :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
                >
                    <el-table-column type="index" >  
                    </el-table-column>
                    <el-table-column label="日期" prop="date" >  
                    </el-table-column>
                    <el-table-column label="姓名" prop="name" >  
                    </el-table-column>
                    <el-table-column label="地址" prop="address" >  
                    </el-table-column>  
                </el-table>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]" 
                    :page-size="pagesize"    
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="userList.length">  
                </el-pagination>
                <!-- :total="userList.length">  这是显示总共有多少数据， -->
                <!-- :page-size="pagesize"     显示当前行的条数 -->
                <!-- :page-sizes="[5, 10, 15, 20]" 这是下拉框可以选择的，每选择一行，要展示多少内容 -->
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
   return {
        currentPage:1, //初始页
        pagesize:10,  //  每页的数据
        userList: [
            {date:"11-12",name:"潇潇",address:"长安"},
            {date:"11-12",name:"潇潇",address:"长安"},
            {date:"11-12",name:"潇潇",address:"长安"},
            {date:"11-12",name:"潇潇",address:"长安"},
            {date:"11-12",name:"潇潇",address:"长安"},
            {date:"11-12",name:"潇潇",address:"长安"},
            {date:"11-12",name:"潇潇",address:"长安"},
            {date:"11-12",name:"潇潇",address:"长安"},
            {date:"11-12",name:"潇潇",address:"长安"},
            {date:"11-12",name:"潇潇",address:"长安"},
            {date:"11-12",name:"潇潇",address:"长安"},
            {date:"11-12",name:"潇潇",address:"长安"},
            {date:"11-12",name:"潇潇",address:"长安"}
        ]
   }
 },
 created() {
    // this.handleUserList()
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize+"====每页几条") //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log(this.currentPage+"=====前往第几页") //点击第几页
    },
    // handleUserList() {
    //   this.$http.get('http://localhost:3000/userList').then(res => { //这是从本地请求的数据接口，
    //     this.userList = res.body
    //   })
    // }
  }
}
</script>