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

相关推荐
dr李四维9 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_23 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~30 分钟前
网页F12：缓存的使用（设值、取值、删除）
前端·缓存
℘团子এ33 分钟前
vue3中如何上传文件到腾讯云的桶（cosbrowser）
前端·javascript·腾讯云
学习前端的小z38 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴42 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手，快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10量化方法怎么选？如何评估量化后的大模型LLM？