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

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

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

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

    1. //控制类：
    2. package com.example.vue3spring.controller;
    3.  
    4. import com.example.vue3spring.entity.Cell;
    5. import com.example.vue3spring.mapper.celllist;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.web.bind.annotation.*;
    8. import java.util.List;
    9.  
    10. @RestController
    11. public class Celllists {
    12.     @Autowired
    13.     private celllist cells;
    14.     @RequestMapping(value = "/celllist",method = RequestMethod.GET)
    15.     @CrossOrigin
    16.     public List cel(){
    17.         List cell1 = cells.cell();
    18.         return  cell1;
    19.     }
    20. }
    1. //实体类
    2. package com.example.vue3spring.entity;
    3.  
    4. public class Cell {
    5.     private int id;
    6.     private String number;
    7.     private String name;
    8.     private String address;
    9.     private String area;
    10.     private int loudong;
    11.     private int households;
    12.     private int affores;
    13.     private String developers;
    14.     private  String property;
    15.     private String creationtime;
    16.     private String state;
    17.  
    18.     @Override
    19.     public String toString() {
    20.         return "Cell{" +
    21.                 "id=" + id +
    22.                 ", number='" + number + '\'' +
    23.                 ", name='" + name + '\'' +
    24.                 ", address='" + address + '\'' +
    25.                 ", area='" + area + '\'' +
    26.                 ", loudong=" + loudong +
    27.                 ", households=" + households +
    28.                 ", affores=" + affores +
    29.                 ", developers='" + developers + '\'' +
    30.                 ", property='" + property + '\'' +
    31.                 ", creationtime='" + creationtime + '\'' +
    32.                 ", state='" + state + '\'' +
    33.                 '}';
    34.     }
    35.  
    36.     public int getId() {
    37.         return id;
    38.     }
    39.  
    40.     public void setId(int id) {
    41.         this.id = id;
    42.     }
    43.  
    44.     public String getNumber() {
    45.         return number;
    46.     }
    47.  
    48.     public void setNumber(String number) {
    49.         this.number = number;
    50.     }
    51.  
    52.     public String getName() {
    53.         return name;
    54.     }
    55.  
    56.     public void setName(String name) {
    57.         this.name = name;
    58.     }
    59.  
    60.     public String getAddress() {
    61.         return address;
    62.     }
    63.  
    64.     public void setAddress(String address) {
    65.         this.address = address;
    66.     }
    67.  
    68.     public String getArea() {
    69.         return area;
    70.     }
    71.  
    72.     public void setArea(String area) {
    73.         this.area = area;
    74.     }
    75.  
    76.     public int getLoudong() {
    77.         return loudong;
    78.     }
    79.  
    80.     public void setLoudong(int loudong) {
    81.         this.loudong = loudong;
    82.     }
    83.  
    84.     public int getHouseholds() {
    85.         return households;
    86.     }
    87.  
    88.     public void setHouseholds(int households) {
    89.         this.households = households;
    90.     }
    91.  
    92.     public int getAffores() {
    93.         return affores;
    94.     }
    95.  
    96.     public void setAffores(int affores) {
    97.         this.affores = affores;
    98.     }
    99.  
    100.     public String getDevelopers() {
    101.         return developers;
    102.     }
    103.  
    104.     public void setDevelopers(String developers) {
    105.         this.developers = developers;
    106.     }
    107.  
    108.     public String getProperty() {
    109.         return property;
    110.     }
    111.  
    112.     public void setProperty(String property) {
    113.         this.property = property;
    114.     }
    115.  
    116.     public String getCreationtime() {
    117.         return creationtime;
    118.     }
    119.  
    120.     public void setCreationtime(String creationtime) {
    121.         this.creationtime = creationtime;
    122.     }
    123.  
    124.     public String getState() {
    125.         return state;
    126.     }
    127.  
    128.     public void setState(String state) {
    129.         this.state = state;
    130.     }
    131. }
    1. //映射数据库关系
    2. package com.example.vue3spring.mapper;
    3.  
    4. import com.example.vue3spring.entity.Cell;
    5. import org.apache.ibatis.annotations.Mapper;
    6. import org.apache.ibatis.annotations.Select;
    7. import org.springframework.stereotype.Repository;
    8.  
    9. import java.util.List;
    10.  
    11. @Mapper
    12. @Repository
    13. public interface celllist {
    14.     @Select("select * from Celllist")
    15.     public List cell();
    16. }

    连接数据库：

    1. spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
    2. spring.datasource.driver-class-name=com.mysql.jdbc.Driver
    3. spring.datasource.url=jdbc:mysql://localhost:3306/springboot?useSSL=false
    4. spring.datasource.username=root
    5. spring.datasource.password=w123456789
    6. mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

    pom文件依赖：

    1.         dependency>
    2.         
    3.         <dependency>
    4.             <groupId>com.baomidougroupId>
    5.             <artifactId>mybatis-plus-boot-starterartifactId>
    6.             <version>3.4.2version>
    7.         dependency>
    8.         
    9.         <dependency>
    10.             <groupId>mysqlgroupId>
    11.             <artifactId>mysql-connector-javaartifactId>
    12.             <version>8.0.23version>
    13.         dependency>
    14.         
    15.         <dependency>
    16.             <groupId>com.alibabagroupId>
    17.             <artifactId>druid-spring-boot-starterartifactId>
    18.             <version>1.1.23version>
    19.         dependency>

    SQl文件;

    1. /*
    2. Navicat MySQL Data Transfer
    4. Source Server         : springbootSQL
    5. Source Server Version : 80030
    6. Source Host           : localhost:3306
    7. Source Database       : springboot
    9. Target Server Type    : MYSQL
    10. Target Server Version : 80030
    11. File Encoding         : 65001
    13. Date: 2023-09-10 14:14:00
    14. */
    15.  
    16. SET FOREIGN_KEY_CHECKS=0;
    17.  
    18. -- ----------------------------
    19. -- Table structure for celllist
    20. -- ----------------------------
    21. DROP TABLE IF EXISTS `celllist`;
    22. CREATE TABLE `celllist` (
    23.   `id` int NOT NULL AUTO_INCREMENT,
    24.   `number` varchar(55) DEFAULT NULL,
    25.   `name` varchar(255) DEFAULT NULL,
    26.   `address` varchar(255) DEFAULT NULL,
    27.   `area` varchar(255) DEFAULT NULL COMMENT '面积\r\n',
    28.   `loudong` int DEFAULT NULL,
    29.   `households` int DEFAULT NULL,
    30.   `afforest` int DEFAULT NULL,
    31.   `developers` varchar(255) DEFAULT NULL,
    32.   `property` varchar(255) DEFAULT NULL,
    33.   `creationtime` varchar(255) DEFAULT NULL,
    34.   `state` varchar(255) DEFAULT NULL,
    35.   PRIMARY KEY (`id`)
    36. ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
    37.  
    38. -- ----------------------------
    39. -- Records of celllist
    40. -- ----------------------------
    41. INSERT INTO `celllist` VALUES ('1', 'z_40586661', '金域华府', '合肥市蜀山区', '12000', '25', '160', '45', '万科', '万科物业', '2023-09-10 09:50:54.000000', '正常');
    42. INSERT INTO `celllist` VALUES ('2', 'z_40586660', '金域华府', '合肥市撒的去', '1145', '21', '145', '39', '徐汇', '永生物业', '2023-09-09 09:52:14.000000', '正常');
    43. INSERT INTO `celllist` VALUES ('3', 'z_40586662', '万福国际', '湖北省武汉市', '1658', '36', '256', '60', '天湖', '天湖物业', '2023-08-29 09:53:19.000000', '正常');
    44. INSERT INTO `celllist` VALUES ('4', 'z_40586663', '暨南国际', '湖北省北京市', '568', '145', '485', '30', '背景', '背景物业', '2023-09-12 09:54:17.000000', '正常');

    前端vue+elementui部分：

    1. <template>
    2. <div style="width: 100% ;margin:0px 10px">
    3.     <el-input class="search" v-model="search" placeholder="Please input" />
    4.     <el-button type="primary">查询el-button>
    5.     <div style="margin:15px">
    6.       <el-button type="warning" :icon="Delete">批量删除el-button>
    7.       <el-button type="primary" :icon="CirclePlus">添加el-button>
    8.     div>
    9.     
    10.     <el-table :data="tableData.slice((page-1)*limt,page*limt)" style="width: 100%;">
    11.     <el-table-column prop="id" type="selection" width="55" />
    12.     <el-table-column prop="id" label="ID" width="55" />
    13.     <el-table-column prop="number" label="小区编号" width="55" />
    14.     <el-table-column prop="name" label="小区名称" />
    15.     <el-table-column prop="address" label="坐落地址" />
    16.     <el-table-column prop="area" label="占地面积(m2)" />
    17.     <el-table-column prop="loudong" label="总栋数" />
    18.     <el-table-column prop="households" label="总户数" />
    19.     <el-table-column prop="affores" label="绿化率" />
    20.     <el-table-column prop="developers" label="开发商名称" />
    21.     <el-table-column prop="property" label="物业公司名称" />
    22.     <el-table-column prop="creationtime" label="创建时间" />
    23.     <el-table-column prop="state" label="状态" />
    24.     <el-table-column prop="address" label="操作" />
    25.   el-table>
    26.   <el-pagination 
    27.   background 
    28.   layout="total, sizes, prev, pager, next, jumper" 
    29.   :page-size="limt" 
    30.   style="margin-top:2%"
    31.   :page-sizes="[10, 20, 30, 40]"
    32.   :current-page="page"
    33.   :total="totl"
    34.   @size-change="handleSizeChange"
    35.   @current-change="handleCurrentChange"
    36.   />
    37. div>
    38. template>
    39.  
    40. <script setup>
    41. import { CirclePlus,Delete } from '@element-plus/icons-vue'
    42. import {ref} from 'vue'
    43. import axios from 'axios';
    44. const search = ref("");
    45. const tableData = ref([]);
    46. const page = ref(1);
    47. const limt = ref(1);
    48. const totl = ref(0);
    49. axios({
    50.   url:"http://localhost:8080/celllist",
    51.   method:"get"
    52. }).then(res=>{
    53.   console.log(res.data);
    54.   tableData.value=res.data;
    55.   console.log(tableData.value);
    56.   totl.value=res.data.length
    57. })
    58. function handleSizeChange(val){
    59.   console.log(val);
    60.   limt.value=val;
    61. }
    62. function handleCurrentChange(val){
    63.   console.log(val);
    64.   page.value=val
    65. }
    66. script>
    67.  
    68. <style scoped>
    69. .search{
    70.   margin: 50px 10px 50px 50px;
    71.   width: 25%;
    72. }
    73. style>

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

  • 相关阅读:
    windows查找指定端口程序，终止程序
    编程语言除了面向过程和面向对象还有什么
    2022最新版-李宏毅机器学习深度学习课程-P26 自注意力机制
    嵌入式C语言中整形溢出问题分析
    23种设计模式之命令模式（Command Pattern）
    springcloud搭建 初级人员的使用搭建。sentinel使用官网有详细的使用方法
    训练营第二十七天 | 491.递增子序列46.全排列47.全排列 II332.重新安排行程51. N皇后
    vue+导出excel报表
    Web攻防01-ASP应用相关漏洞-HTTP.SYS&IIS短文件&文件解析&ACCESS注入
    C++vector的简单模拟实现
  • 原文地址：https://blog.csdn.net/qq_63656102/article/details/132790681