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

news2025/1/24 2:14:56

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

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

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

//控制类：
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;
    }
}

//实体类
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;
    }
}

//映射数据库关系
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();
}

连接数据库：

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文件依赖：

        </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文件;

/*
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部分：

<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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/996207.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ssm实现折线统计图

ssm实现折线统计图

​ 方法1&#xff1a;单张数据表中的数据图表生成 图表统计&#xff0c;查看部门人数统计这里实现的时单张表中的数据实现部门人数折线统计图展示。 <script type"text/javascript">// 利用AjAx来获取后台传入的数据&#xff08;Responsebody注解传入的&…
阅读更多...
日志平台搭建第五章：Linux安装Kafka

日志平台搭建第五章：Linux安装Kafka

相关链接 http://kafka.apache.org/downloads 1.使用Docker安装zookeeper 下载镜像&#xff1a; docker pull zookeeper:3.4.14 创建容器&#xff1a; docker run --name zookeeper \ -v /opt/data/zksingle:/data \ -p 2181:2181 \ -e ZOO_LOG4J_PROP"INFO,ROLLINGFILE&q…
阅读更多...
马原123

马原123

阅读更多...
日志平台搭建第六章：logstash通过kafka通道采集日志信息

日志平台搭建第六章：logstash通过kafka通道采集日志信息

1.修改文件/opt/app/elk/logstash-7.5.1/config.d/config1.conf&#xff0c;在input下添加kafka采集配置 #192.168.128.130:9103:kafka地址 #topics:主题 kafka {bootstrap_servers > ["192.168.128.130:9103"]group_id > "logstash"topics > [&…
阅读更多...
基于NAND存储的双分区OTA升级方案

基于NAND存储的双分区OTA升级方案

系统启动&#xff1a;UBOOT--->KERNEL--->ROOTFS 分区分布&#xff1a;A1A2B1B2C1C2D结构&#xff1b; A1B1C1D为一组启动序列&#xff1b; A2B2C2D为另外 一组启动序列&#xff1b; 下面介绍一下有后悔药式的升级方案&#xff1a; 1.1 通过curl从服务器下载升级包…
阅读更多...
电脑提示msvcp110.dll是什么意思？msvcp110.dll丢失修复办法分享

电脑提示msvcp110.dll是什么意思？msvcp110.dll丢失修复办法分享

当我们使用电脑时&#xff0c;有时候会出现一些错误提示&#xff0c;其中就包括了“msvcp110.dll 丢失”的提示。那么&#xff0c;这个提示是什么意思呢&#xff1f;电脑提示找不到msvcr110.dll怎么办&#xff0c;我们在使用电脑的时候&#xff0c;总是会遇到很多的电脑难题。当…
阅读更多...
python趣味编程-数独游戏

python趣味编程-数独游戏

数独游戏是一个用Python编程语言编写的应用程序。该项目包含可以显示实际应用程序的基本功能。该项目可以让修读 IT 相关课程并希望开发简单应用程序的学生受益。这个Python 数独游戏是一个简单的项目，可用于学习tkinter库的实践。这个数独游戏可以提供Python编程的基本编码技…
阅读更多...
PPT 生成整数序列字典序的r-组合算法

PPT 生成整数序列字典序的r-组合算法

生成整数序列字典序的r-组合算法 一、PPT效果展示二、问题2.1 简述2.2 算法简述2.3 例子 三、PPT实现 一、PPT效果展示 二、问题 2.1 简述 给定一个整数序列 (1&#xff0c;2&#xff0c;3&#xff0c;…n)&#xff0c;输出其所有字典序的r-组合&#xff0c;注意事项&#xf…
阅读更多...
KT142C-sop16语音芯片ic的功耗详细说明_实测_以及功耗机制

KT142C-sop16语音芯片ic的功耗详细说明_实测_以及功耗机制

KT142C是一个提供串口的SOP16语音芯片&#xff0c;完美的集成了MP3的硬解码。内置330KByte的空间&#xff0c;最大支持330秒的语音长度&#xff0c;支持多段语音&#xff0c;支持直驱0.5W的扬声器无需外置功放 其中KT142C芯片的&#xff0c;功耗表现还是非常的好。芯片工作的时…
阅读更多...
Vue中对于指令的介绍

Vue中对于指令的介绍

Vue指令 文章目录 Vue指令1、介绍2、指令介绍2.1、v-html2.2、v-show和v-if3.2、v-else 和 v-else-if3.3、v-on3.4、v-bind3.5、v-for3.6、v-for 中的key3.7、v-model 3、指令修饰符3.1、 按键修饰符3.2、 监听v-model修饰符3.3、 事件修饰符 1、介绍 Vue 会根据不同的【指令】…
阅读更多...
SQL Server2022安装教程

SQL Server2022安装教程

SQL Server 是一个关系数据库管理系统。它最初是由Microsoft、Sybase 和Ashton-Tate三家公司共同开发的&#xff0c;于1988 年推出了第一个OS/2版本。在Windows NT 推出后&#xff0c;Microsoft与Sybase 在SQL Server 的开发上就分道扬镳了&#xff0c;Microsoft 将SQL Server移…
阅读更多...
Java中快速排序的优化技巧：随机取样、三数取中和插入排序

Java中快速排序的优化技巧：随机取样、三数取中和插入排序

目录 快速排序基础 优化1&#xff1a;随机取样 优化2&#xff1a;三数取中 优化3&#xff1a;插入排序 总结&#xff1a; 快速排序&#xff08;Quick Sort&#xff09;是一种高效的排序算法&#xff0c;它的平均时间复杂度为O(n log n)。然而&#xff0c;在某些情况下&…
阅读更多...
八）Stable Diffussion使用教程：MultiDiffusion

八）Stable Diffussion使用教程：MultiDiffusion

multidiffusion，它可以实现图片从 512 像素到 2K、4K 甚至 6K 画质的飞跃。 插件安装步骤： 1）选择扩展 2）选择可用，点击加载按钮 3）找到multidiffusion，点击右侧安装按钮 安装插件后可以在文生图和图生图的出图参数中看到多了两个区域，其实这个插件是由两部分组成的，…
阅读更多...
openGauss学习笔记-65 openGauss 数据库管理-创建和管理数据库

openGauss学习笔记-65 openGauss 数据库管理-创建和管理数据库

文章目录 openGauss学习笔记-65 openGauss 数据库管理-创建和管理数据库65.1 前提条件65.2 背景信息65.3 注意事项65.4 操作步骤65.4.1 创建数据库65.4.2 查看数据库65.4.3 修改数据库65.4.4 删除数据库 openGauss学习笔记-65 openGauss 数据库管理-创建和管理数据库 65.1 前提…
阅读更多...
Tailwind 练手项目 2

Tailwind 练手项目 2

Tailwind 练手项目 2 这次换了个 up 又滚完了一遍 tailwind&#xff0c;算是拾遗补缺了&#xff0c;之前的笔记&#xff1a; Tailwind CSS 速成Tailwind 练手项目 代码在&#xff1a;https://github.com/GoldenaArcher/tailwind&#xff0c;这次偷懒了就没在线效果&#xff…
阅读更多...
bs4库爬取天气预报

bs4库爬取天气预报

Python不仅用于网站开发&#xff0c;数据分析&#xff0c;图像处理&#xff0c;也常用于爬虫技术方向&#xff0c;最近学习了解下&#xff0c;爬虫技术入门一般先使用bs4库&#xff0c;爬取天气预报简单尝试下。 第一步&#xff1a;首先选定目标网站地址 网上查询&#xff0c…
阅读更多...
6、Spring之依赖注入源码解析（上）

6、Spring之依赖注入源码解析（上）

依赖注入底层原理流程图： Spring中Bean的依赖注入原理| ProcessOn免费在线作图,在线流程图,在线思维导图 Spring中到底有几种依赖注入的方式？ 首先分两种： 手动注入自动注入手动注入 在XML中定义Bean时，就是手动注入，因为是程序员手动给某个属性指定了值。 <bean n…
阅读更多...
系统内存的探测

系统内存的探测

lab2 系统内存的探测 参考博客 主要涉及操作系统的物理内存管理。 操作系统为了使用内存&#xff0c;还需高效地管理内存资源。 这里我们会了解并且自己动手完成一个简单的物理内存管理系统。实验目的 理解基于段页式内存地址的转换机制 理解页表的建立和使用方法 理解物理内…
阅读更多...
Python之线程Thread（一）

Python之线程Thread（一）

一、什么是线程 线程(Thread)特点： 线程（Thread）是操作系统能够进行运算调度的最小单位。它被包含在进程之中，是进程中的实际运作单位线程是程序执行的最小单位，而进程是操作系统分配资源的最小单位；一个进程由一个或多个线程组成，线程是一个进程中代码的不同执行路线；…
阅读更多...
【JavaEE】_CSS引入方式与选择器

【JavaEE】_CSS引入方式与选择器

目录 1. 基本语法格式 2. 引入方式 2.1 内部样式 2.2 内联样式 2.3 外部样式 3. 基础选择器 3.1 标签选择器 3.2 类选择器 3.3 ID选择器 4. 复合选择器 4.1 后代选择器 4.2 子选择器 4.3 并集选择器 4.4 伪类选择器 1. 基本语法格式 选择器若干属性声明 2. 引入…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023