vue3+emelenui实现前端分页功能—最简单

一只爱web的羊驼2023-09-11 13:56

在一些后台管理系统或者博客管理系统中分页功能是很常见的一种服务，因为总不可能把很多数据放在一块，那样阅读起来很麻烦，所以需要分页。也是前后端中最为常见的一个功能

先看一下分页场景的模拟。

首先我们要去后端写点数据通过接口给前端：

java 复制代码 
//控制类：
package com.example.vue3spring.controller;

import com.example.vue3spring.entity.Cell;
import com.example.vue3spring.mapper.celllist;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@RestController
public class Celllists {
    @Autowired
    private celllist cells;
    @RequestMapping(value = "/celllist",method = RequestMethod.GET)
    @CrossOrigin
    public List<Cell> cel(){
        List<Cell> cell1 = cells.cell();
        return  cell1;
    }
}
java 复制代码 
//实体类
package com.example.vue3spring.entity;

public class Cell {
    private int id;
    private String number;
    private String name;
    private String address;
    private String area;
    private int loudong;
    private int households;
    private int affores;
    private String developers;
    private  String property;
    private String creationtime;
    private String state;

    @Override
    public String toString() {
        return "Cell{" +
                "id=" + id +
                ", number='" + number + '\'' +
                ", name='" + name + '\'' +
                ", address='" + address + '\'' +
                ", area='" + area + '\'' +
                ", loudong=" + loudong +
                ", households=" + households +
                ", affores=" + affores +
                ", developers='" + developers + '\'' +
                ", property='" + property + '\'' +
                ", creationtime='" + creationtime + '\'' +
                ", state='" + state + '\'' +
                '}';
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getNumber() {
        return number;
    }

    public void setNumber(String number) {
        this.number = number;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getArea() {
        return area;
    }

    public void setArea(String area) {
        this.area = area;
    }

    public int getLoudong() {
        return loudong;
    }

    public void setLoudong(int loudong) {
        this.loudong = loudong;
    }

    public int getHouseholds() {
        return households;
    }

    public void setHouseholds(int households) {
        this.households = households;
    }

    public int getAffores() {
        return affores;
    }

    public void setAffores(int affores) {
        this.affores = affores;
    }

    public String getDevelopers() {
        return developers;
    }

    public void setDevelopers(String developers) {
        this.developers = developers;
    }

    public String getProperty() {
        return property;
    }

    public void setProperty(String property) {
        this.property = property;
    }

    public String getCreationtime() {
        return creationtime;
    }

    public void setCreationtime(String creationtime) {
        this.creationtime = creationtime;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }
}
java 复制代码 
//映射数据库关系
package com.example.vue3spring.mapper;

import com.example.vue3spring.entity.Cell;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

import java.util.List;

@Mapper
@Repository
public interface celllist {
    @Select("select * from Celllist")
    public List<Cell> cell();
}

连接数据库：

Dart 复制代码 
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/springboot?useSSL=false
spring.datasource.username=root
spring.datasource.password=w123456789
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

pom文件依赖：

XML 复制代码 
        </dependency>
        <!--        mybatis-plus依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>
        <!--        mysql驱动依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.23</version>
        </dependency>
        <!--        数据连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.23</version>
        </dependency>

SQl文件;

sql 复制代码 
/*
Navicat MySQL Data Transfer

Source Server         : springbootSQL
Source Server Version : 80030
Source Host           : localhost:3306
Source Database       : springboot

Target Server Type    : MYSQL
Target Server Version : 80030
File Encoding         : 65001

Date: 2023-09-10 14:14:00
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for celllist
-- ----------------------------
DROP TABLE IF EXISTS `celllist`;
CREATE TABLE `celllist` (
  `id` int NOT NULL AUTO_INCREMENT,
  `number` varchar(55) DEFAULT NULL,
  `name` varchar(255) DEFAULT NULL,
  `address` varchar(255) DEFAULT NULL,
  `area` varchar(255) DEFAULT NULL COMMENT '面积\r\n',
  `loudong` int DEFAULT NULL,
  `households` int DEFAULT NULL,
  `afforest` int DEFAULT NULL,
  `developers` varchar(255) DEFAULT NULL,
  `property` varchar(255) DEFAULT NULL,
  `creationtime` varchar(255) DEFAULT NULL,
  `state` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

-- ----------------------------
-- Records of celllist
-- ----------------------------
INSERT INTO `celllist` VALUES ('1', 'z_40586661', '金域华府', '合肥市蜀山区', '12000', '25', '160', '45', '万科', '万科物业', '2023-09-10 09:50:54.000000', '正常');
INSERT INTO `celllist` VALUES ('2', 'z_40586660', '金域华府', '合肥市撒的去', '1145', '21', '145', '39', '徐汇', '永生物业', '2023-09-09 09:52:14.000000', '正常');
INSERT INTO `celllist` VALUES ('3', 'z_40586662', '万福国际', '湖北省武汉市', '1658', '36', '256', '60', '天湖', '天湖物业', '2023-08-29 09:53:19.000000', '正常');
INSERT INTO `celllist` VALUES ('4', 'z_40586663', '暨南国际', '湖北省北京市', '568', '145', '485', '30', '背景', '背景物业', '2023-09-12 09:54:17.000000', '正常');

前端vue+elementui部分：

html 复制代码 
<template>
<div style="width: 100% ;margin:0px 10px">
    <el-input class="search" v-model="search" placeholder="Please input" />
    <el-button type="primary">查询</el-button>
    <div style="margin:15px">
      <el-button type="warning" :icon="Delete">批量删除</el-button>
      <el-button type="primary" :icon="CirclePlus">添加</el-button>
    </div>
    <!-- (当前页数-1)*每页条数,当前页数*当前条数 -->
    <el-table :data="tableData.slice((page-1)*limt,page*limt)" style="width: 100%;">
    <el-table-column prop="id" type="selection" width="55" />
    <el-table-column prop="id" label="ID" width="55" />
    <el-table-column prop="number" label="小区编号" width="55" />
    <el-table-column prop="name" label="小区名称" />
    <el-table-column prop="address" label="坐落地址" />
    <el-table-column prop="area" label="占地面积(m2)" />
    <el-table-column prop="loudong" label="总栋数" />
    <el-table-column prop="households" label="总户数" />
    <el-table-column prop="affores" label="绿化率" />
    <el-table-column prop="developers" label="开发商名称" />
    <el-table-column prop="property" label="物业公司名称" />
    <el-table-column prop="creationtime" label="创建时间" />
    <el-table-column prop="state" label="状态" />
    <el-table-column prop="address" label="操作" />
  </el-table>
  <el-pagination 
  background 
  layout="total, sizes, prev, pager, next, jumper" 
  :page-size="limt" 
  style="margin-top:2%"
  :page-sizes="[10, 20, 30, 40]"
  :current-page="page"
  :total="totl"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  />
</div>
</template>

<script setup>
import { CirclePlus,Delete } from '@element-plus/icons-vue'
import {ref} from 'vue'
import axios from 'axios';
const search = ref("");
const tableData = ref([]);
const page = ref(1);
const limt = ref(1);
const totl = ref(0);
axios({
  url:"http://localhost:8080/celllist",
  method:"get"
}).then(res=>{
  console.log(res.data);
  tableData.value=res.data;
  console.log(tableData.value);
  totl.value=res.data.length
})
function handleSizeChange(val){
  console.log(val);
  limt.value=val;
}
function handleCurrentChange(val){
  console.log(val);
  page.value=val
}
</script>

<style scoped>
.search{
  margin: 50px 10px 50px 50px;
  width: 25%;
}
</style>

若有不懂地方，推荐视频：https://www.bilibili.com/video/BV1Q3411u7cF/?p=2&spm_id_from=pageDriver&vd_source=0621c8112dd04675d7876e772210635b

相关推荐
薛一半4 分钟前
PC端查看历史消息，鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾8 分钟前
CSS综合练习——懒羊羊网页设计
前端·css
过期的H2O221 分钟前
【H2O2|全栈】JS进阶知识（四）Ajax
开发语言·javascript·ajax
MarcoPage21 分钟前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发23 分钟前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
工业互联网专业32 分钟前
Python毕业设计选题：基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计
**之火44 分钟前
Web Components 是什么
前端·web components
顾菁寒1 小时前
WEB第二次作业
前端·css·html
前端宝哥1 小时前
10 个超赞的开发者工具，助你轻松提升效率
前端·程序员
你好龙卷风！！！1 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）05红米手机使用google play06【经验分享】Ubuntu22.04安装微信(linux官方版)07【AIGC】重塑未来的科技巨轮08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09RAG 实践- Ollama+RagFlow 部署本地知识库10Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO