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

这篇具有很好参考价值的文章主要介绍了vue3+emelenui实现前端分页功能—最简单。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

 先看一下分页场景的模拟。vue3+emelenui实现前端分页功能—最简单,前端,vue.js,javascript,前端分页,elementui

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

//控制类:
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文章来源地址https://www.toymoban.com/news/detail-705471.html

到了这里,关于vue3+emelenui实现前端分页功能—最简单的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+element-plus实现表格多选功能(可以清除选项或分页保留选项)

    如图所示,在实际开发中,数据量大的表格基本都添加上了分页功能,每个页面请求的数据回交换更新,第一页的选中效果在跳转至第二页后,如果没有做相关处理,选中项会被清空,具体解决方法如下 在需要处理的表格标签中加上 :row-key=\\\"getRowKeys\\\" 以及 @selection-change=“ha

    2024年02月12日
    浏览(52)
  • vue3 + mark.js | 实现文字标注功能

    1、监听鼠标抬起事件,通过 window.getSelection() 方法获取鼠标用户选择的文本范围或光标的当前位置。 2、通过 选中的文字长度是否大于0 或 window.getSelection().isCollapsed (返回一个布尔值用于描述选区的起始点和终止点是否位于一个位置,即是否框选了)来判断是否展示标签选择的

    2024年02月08日
    浏览(39)
  • vue3 + mark.js 实现文字标注功能

    2024年02月04日
    浏览(48)
  • #vue3 实现前端下载excel文件模板功能

    一、需求: 前端无需通过后端接口,即可实现模板下载功能。 通过构造一个 JSON 对象,使用前端常用的 第三方库 xlsx ,可以直接将该 JSON 对象转换成 Excel 文件,让用户下载模板 二、效果: 三、源码如下:

    2024年01月19日
    浏览(64)
  • 记录--vue3 + mark.js | 实现文字标注功能

    1、监听鼠标抬起事件,通过 window.getSelection() 方法获取鼠标用户选择的文本范围或光标的当前位置。 2、通过 选中的文字长度是否大于0 或 window.getSelection().isCollapsed (返回一个布尔值用于描述选区的起始点和终止点是否位于一个位置,即是否框选了)来判断是否展示标签选择的

    2024年02月08日
    浏览(47)
  • vue3--element组件分页功能

    直接上代码: 我用的是element组件 首先是列表data是数据源 vue代码:

    2024年02月11日
    浏览(29)
  • 前端实现简单的sse封装(React hook Vue3)

    所谓的SSE(Sever-Sent Event),就是浏览器向服务器发送了一个HTTP请求,保持长连接,服务器不断单向地向浏览器推送“信息”,这么做是为了节省网络资源,不用一直发请求,建立新连接。 优点:SSE和WebSocket相比,最大的优势是便利,服务端不需要第三方组件,开发难度低,SSE和

    2024年02月09日
    浏览(44)
  • vue3+vant+cropper.js实现移动端图片裁剪功能

    最近做项目中遇到一个需求,需要对海报图片按照一定的比例进行裁剪并上传到oss。一开始这个需求思路有两个,使用canvas原生或者寻找现成的第三方库,对比了一番觉得canvas实现时间耗费较长,且秉承着不重复造轮子的原则(其实是菜)。 在进行技术调研后,决定使用vu

    2024年02月01日
    浏览(41)
  • 使用ExcelJS实现excel的前端导出功能(Vue3+TS)

    ExcelJS :读取,操作并写入电子表格数据和样式到 XLSX 和 JSON 文件。一个 Excel 电子表格文件逆向工程项目。 github中文文档:https://github.com/exceljs/exceljs/blob/master/README_zh.md  封装excel.ts工具文件 表格页面调用excel工具文件 

    2024年02月14日
    浏览(52)
  • 【Vue】使用print.js插件实现打印预览功能,超简单

    目录 一、实现效果  二、实现步骤 【1】安装插件 【2】在需要打印的页面导入 【3】在vue文件中需要打印的部分外层套一层div,给div设置id。作为打印的区域 【4】在打印按钮上添加打印事件 【5】在methods中添加点击事件 三、完整代码   print.js插件,可以打印html、pdf、json数

    2024年02月14日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包