当前位置: 首页 > news >正文

vue+element 前端实现增删查改+分页,不调用后端

前端实现增删查改+分页,不调用后端。
大概就是对数组内的数据进行增删查改+分页
没调什么样式,不想写后端,当做练习
在这里插入图片描述

<template><div><!-- 查询 --><el-form :inline="true" :model="formQuery"><el-form-item label="时间" :label-width="formLabelWidth"><el-date-pickerv-model="formQuery.date"type="daterange"value-format="yyyy-MM-dd"start-placeholder="开始日期"end-placeholder="结束日期":default-time="['00:00:00', '23:59:59']"></el-date-picker></el-form-item><el-form-item label="姓名" :label-width="formLabelWidth"><el-inputv-model="formQuery.name"style="width: 240px"placeholder="Please input"clearable /></el-form-item><el-form-item label="地址" :label-width="formLabelWidth"><el-inputv-model="formQuery.address"style="width: 240px"placeholder="Please input"clearable /></el-form-item><el-form-item><el-button type="primary" @click="query()">查询</el-button></el-form-item><el-form-item><el-button type="success" @click="add()" class="addButton">添加</el-button></el-form-item></el-form><!-- 表格展示 --><el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%"><el-table-column type="index" label="id" width="50" /><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /><el-table-column label="操作"><template slot-scope="scope"><!--插槽知识点--><el-button type="primary" @click="onEdit(scope.$index)">编辑</el-button><!-- <el-button type="primary" @click="dialogFormEditVisible = true">编辑</el-button> --><!-- <el-button type="danger" @click="onDelete(scope.$index)">删除</el-button> --><!-- 删除二次确认 --><el-popover placement="top" width="160" v-model="scope.row.visible"><p>确定删除吗?</p><div style="text-align: right; margin: 0"><el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button><el-button type="primary" size="mini" @click="onDelete(scope.$index)">确定</el-button></div><el-button slot="reference" type="danger">删除</el-button></el-popover></template></el-table-column></el-table><!-- 分页 --><div class="block" style="margin-top: 15px"><el-paginationalign="center"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[1, 3, 5, 7]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="tableData.length"></el-pagination></div><!-- 修改弹出框 --><el-dialog :visible.sync="dialogFormEditVisible" title="修改" width="500"><el-form :model="formEdit"><el-form-item label="时间" :label-width="formLabelWidth"><el-date-pickerv-model="formEdit.date"type="date"format="yyyy-MM-dd"value-format="yyyy-MM-dd"placeholder="Pick a day" /></el-form-item><el-form-item label="姓名" :label-width="formLabelWidth"><el-inputv-model="formEdit.name"style="width: 240px"placeholder="Please input"clearable /></el-form-item><el-form-item label="地址" :label-width="formLabelWidth"><el-inputv-model="formEdit.address"style="width: 240px"placeholder="Please input"clearable /></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogFormEditVisible = false">Cancel</el-button><el-button type="primary" @click="editConfirm()"> Confirm </el-button></div></template></el-dialog><!-- 添加弹出框 --><el-dialog :visible.sync="dialogFormAddVisible" title="添加" width="500"><el-form :model="formAdd"><el-form-item label="时间" :label-width="formLabelWidth"><el-date-pickerv-model="formAdd.date"type="date"format="yyyy-MM-dd"value-format="yyyy-MM-dd"placeholder="Pick a day" /></el-form-item><el-form-item label="姓名" :label-width="formLabelWidth"><el-inputv-model="formAdd.name"style="width: 240px"placeholder="Please input"clearable /></el-form-item><el-form-item label="地址" :label-width="formLabelWidth"><el-inputv-model="formAdd.address"style="width: 240px"placeholder="Please input"clearable /></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogFormAddVisible = false">Cancel</el-button><el-button type="primary" @click="addConfirm()"> Confirm </el-button></div></template></el-dialog></div>
</template><script>
import { Container } from "element-ui";export default {name: "practice",data() {return {tableData: [{date: "2024-05-03",name: "Tom1",address: "No. 11, Grove St, Los Angeles",},{date: "2024-06-02",name: "Tom2",address: "No. 22, Grove St, Los Angeles",},{date: "2024-03-04",name: "Tom3",address: "No. 33, Grove St, Los Angeles",},{date: "2024-03-21",name: "Tom4",address: "No. 44, Grove St, Los Angeles",},],currentPage: 1, // 当前页码total: 20, // 总条数pageSize: 3, // 每页的数据条数formQuery: {date: "",name: "",address: "",},dialogFormEditVisible: false,dialogFormAddVisible: false,formEdit: {date: "",name: "",address: "",},formAdd: {date: "",name: "",address: "",},formLabelWidth: "140px",num: "",};},methods: {// 添加add() {this.formAdd = {};this.dialogFormAddVisible = true;},addConfirm() {this.tableData.push(this.formAdd);this.dialogFormAddVisible = false;},// 打开修改弹窗 回显onEdit(index) {// console.log(index);this.dialogFormEditVisible = true;this.num = index;// this.formEdit = this.tableData[index]; 在修改弹窗中进行修改,父表单的内容会被直接修改/*在你的代码中,当点击修改按钮时,通过onEdit方法打开弹窗并设置表单数据formEdit为tableData[index]。这里需要注意的是,Vue.js 中对象是引用类型,所以 this.formEdit = this.tableData[index]; 实际上是将 formEdit 和 tableData[index] 引用了同一个对象。因此,当你在弹窗中修改formEdit时,同时也修改了tableData[index] 对应的对象,导致父表单内容直接被修改了。为了避免这种情况,你可以在 onEdit 方法中对 tableData[index] 进行深拷贝,而不是简单地引用赋值。这样就可以保持弹窗中的表单数据和原始数据的独立性,不会相互影响。你可以使用 Object.assign() 或者扩展运算符(spread operator)来进行深拷贝,例如:this.formEdit = Object.assign({}, this.tableData[index]);// 或者this.formEdit = { ...this.tableData[index] };这样修改后,当你在弹窗中修改formEdit时,不会影响到tableData中的数据,直到点击确认按钮后才会将修改后的数据应用到tableData中。 */this.formEdit = Object.assign({}, this.tableData[index]);},// 修改确认editConfirm() {this.tableData[this.num].date = this.formEdit.date;this.tableData[this.num].name = this.formEdit.name;this.tableData[this.num].address = this.formEdit.address;this.dialogFormEditVisible = false;},// 删除onDelete(index) {// splice(index, 1) 表示从 tableData 数组中删除一个元素,从指定的 index 开始删除this.tableData.splice(index, 1);},//查询query() {// console.log(this.formQuery);var timeResult = [];var addressResult = [];var nameResult = [];var startDate = this.formQuery.date[0];var endDate = this.formQuery.date[1];var address = this.formQuery.address;var name = this.formQuery.name;var date = this.formQuery.date;// 判断日期if (date != "") {for (let index = 0; index < this.tableData.length; index++) {const element = this.tableData[index];if (startDate <= element.date && endDate >= element.date) {timeResult.push(this.tableData[index]);}}} else {timeResult = this.tableData;}// 判断地址if (address != "") {for (const iterator of timeResult) {if (iterator.address.includes(address)) {addressResult.push(iterator);}}} else {addressResult = this.tableData;}// 判断姓名if (name != "") {addressResult.forEach((element) => {if (element.name.includes(name)) {nameResult.push(element);}});} else {nameResult = this.tableData;}this.tableData = nameResult;},// 分页//每页条数改变时触发 选择一页显示多少行handleSizeChange(val) {// console.log(`每页 ${val} 条`);this.pageSize = val;// this.fetchData(this.currentPage);},//当前页改变时触发 跳转其他页handleCurrentChange(val) {// console.log(`当前页: ${val}`);this.currentPage = val;// this.fetchData(val);},},
};
</script><style scoped>
.el-button {margin-right: 10px;
}
</style>

相关文章:

vue+element 前端实现增删查改+分页,不调用后端

前端实现增删查改分页&#xff0c;不调用后端。 大概就是对数组内的数据进行增删查改分页 没调什么样式&#xff0c;不想写后端&#xff0c;当做练习 <template><div><!-- 查询 --><el-form :inline"true" :model"formQuery">&l…...

浅谈如何自我实现一个消息队列服务器(2)——实现 broker server 服务器

文章目录 一、实现 broker server 服务器1.1 创建一个SpringBoot项目1.2 创建Java类 二、硬盘持久化存储 broker server 里的数据2.1 数据库存储2.1.1 浅谈SQLiteMyBatis 2.1.2 如何使用SQLite 2.2 使用DataBaseManager类封装数据库操作2.3 文件存储消息2.3.1 存储消息时&#…...

html5cssjs代码 039 元素尺寸

html5&css&js代码 039 元素尺寸 一、代码二、解释 使用CSS来定义HTML元素的尺寸&#xff0c;并通过不同的计量单位来设置元素的大小。 一、代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><tit…...

Lucene的lukeall工具的下载和使用图解

Lucene的lukeall工具的下载和使用图解-CSDN博客 Releases DmitryKey/luke (github.com) 需要github的用户名和密码&#xff0c;没有是下载不成功的....

【题目】【网络系统管理】2019年全国职业技能大赛高职组计算机网络应用赛项H卷

极安云科专注职业教育技能竞赛培训4年&#xff0c;包含信息安全管理与评估、网络系统管理、网络搭建等多个赛项及各大CTF模块培训学习服务。本团队基于赛项知识点&#xff0c;提供完整全面的系统性理论教学与技能培训&#xff0c;成立至今持续优化教学资源与讲师结构&#xff0…...

OpenRewrite框架原理解析

目录 1. OpenRewrite处理流程概述 2. OpenRewrite访问者模式的应用 2.1 访问者模式简介 2.2 OpenRewrite框架如何应用访问者模式 2.2.1 抽象访问者&具体访问者 2.2.2 抽象元素&具体元素 3. LST无损语义树构造 4. 配方&#xff08;Recipe&#xff09;执行流程 …...

LeetCode_Java_递归系列(题目+思路+代码)

206.反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]以此类推&#xff0c;直到反转结束返回头结点 class Solution {public ListNode rever…...

c++ 编译为WebAssembly时,怎么判断是release/debug环境?

我对这块研究不深 我的需求是把cpp代码编译为wasm的形式时&#xff0c;需要知道是debug/release 然而 尝试了一些办法 没有满足我的需求 尝试1&#xff1a; #include <iostream>bool isDebugMode() { #ifdef EMSCRIPTENbool isDebug EM_ASM_INT({return (typeof conso…...

信号处理--基于正则化聚合的共空间模态(CSP)脑电信号分类

目录 理论 工具 方法实现 代码获取 参考文献 理论 传统的通用空间模式 (CSP) 是一种流行的算法,用于对脑电图 (EEG) 信号进行分类。本文主要介绍小样本设置 (SSS) 中 CSP 的正则化和聚合技术。传统的 CSP 基于样本协方差矩阵估计。如果训练样本数量较少,其脑电图分类的…...

【2024年5月备考新增】《软考真题分章练习(含答案解析) - 11 项目风险管理(高项)》

1 题目 1、风险可以从不同角度、根据不同的标准来进行分类。百年不遇的暴雨属于()。 A.不可预测风险 B.可预测风险 C.已知风险 D.技术风险 2、人们对风险事件都有一定的承受能力,当()时,人们愿意承担的风险越大。 A.项目活动投入的越多 B.项目的收益越大 C.个人、组织拥…...

【3GPP】【核心网】【4G】4G手机接入过程,手机附着过程(超详细)

1. 4G手机接入过程&#xff0c;手机附着过程 附着&#xff08;Attach&#xff09;&#xff1a; 终端在PLMN中注册&#xff0c;从而建立自己的档案&#xff0c;即终端上下文 进行附着的三种情况&#xff1a; ①终端开机后的附着&#xff0c;初始附着 ②终端从覆盖盲区返回到…...

【LeetCode-46.全排列】

题目详情&#xff1a; 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]示例 2&#xff1a; …...

【Web】浅聊Jackson序列化getter的利用——POJONode

目录 核心速览 原理分析 EXP TemplatesImpl利用 SignedObject利用 核心速览 writeValueAsString是jackson序列化自带的入口&#xff0c;在调用该方法的过程中将会通过遍历的方法将bean对象中的所有的属性的getter方法进行调用 下面介绍如下利用链&#xff1a; BadAttrib…...

osgEarth学习笔记2-第一个Osg QT程序

原文链接 上个帖子介绍了osgEarth开发环境的安装。本帖介绍我的第一个Osg QT程序。 下载 https://github.com/openscenegraph/osgQt 解压&#xff0c;建立build目录。 使用Cmake-GUI Configure 根据需要选择win32或者x64&#xff0c;这里我使用win32. 可以看到include和lib路…...

2024年发布jar到国外maven中央仓库最新教程

2024年发布jar到国外maven中央仓库最新教程 文章目录 1.国外sonatype仓库的版本1.1老OSSHR账号注册说明1.2新账号注册说明 2.新账号注册(必选)3.新账号登录创建Namespace3.1创建Namespace的名字的格式要求&#xff08;必选&#xff09;3.2发布一个静态网站&#xff08;可选&…...

在ubuntu22.04.4安装freeswitch1.10.10

一、环境 No LSB modules are available. Distributor ID:      Ubuntu Description:         Ubuntu 22.04.4 LTS Release:             22.04.4 Codename:            jammy 二、依赖 1、 工具包 apt install -y openssh-server …...

qt 置顶窗口崩溃无法退出解决,停止运行快捷键设置

有时置顶窗口调试崩溃需要快捷键进行关闭&#xff0c;如下设置即可 这样就可以通过全局快捷键退出了&#xff0c;避免置顶崩溃无法关闭程序的问题。...

HBCalculator 程序:通过 VMD 可计算分子动力学模拟中氢键密度和强度的一维和二维分布

分享一个通过 VMD 可计算分子动力学模拟中氢键密度和强度的一维和二维分布程序 HBCalculator。 感谢论文的原作者&#xff01; 主要内容 “氢键是分子系统中关键的非共价相互作用&#xff0c;对生物、化学和能量相关过程产生重大影响&#xff1b;因此&#xff0c;描述氢键信息…...

鸿蒙-项目创建及了解

目录 项目创建 1.App普通项目创建 2.元服务创建 项目结构 .hvigor .idea AppScope entry EntryAbility.ts pages resources module.json5 ohosTest hvigorfile.ts build-profile.json5 oh_modules build-profile.json5 hvigorfile.ts 项目运行 项目创建 F…...

SQLiteC/C++接口详细介绍sqlite3_stmt类(九)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;六&#xff09; 下一篇&#xff1a; 无 33、sqlite3_column_table_name 函数 sqlite3_column_table_name 用于返回结果集中指定列所属的表的名称。如果查询中列使…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

LangChain 中的文档加载器(Loader)与文本切分器(Splitter)详解《二》

&#x1f9e0; LangChain 中 TextSplitter 的使用详解&#xff1a;从基础到进阶&#xff08;附代码&#xff09; 一、前言 在处理大规模文本数据时&#xff0c;特别是在构建知识库或进行大模型训练与推理时&#xff0c;文本切分&#xff08;Text Splitting&#xff09; 是一个…...

【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据(33个指标)

旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。 今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据&#xff01;该数据集源自2025年4月发表于《地理学报》的论文成果…...