当前位置: 首页 > 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日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

Copilot for Xcode (iOS的 AI辅助编程)

Copilot for Xcode 简介Copilot下载与安装 体验环境要求下载最新的安装包安装登录系统权限设置 AI辅助编程生成注释代码补全简单需求代码生成辅助编程行间代码生成注释联想 代码生成 总结 简介 尝试使用了Copilot&#xff0c;它能根据上下文补全代码&#xff0c;快速生成常用…...

STL 2迭代器

文章目录 1.迭代器2.输入迭代器3.输出迭代器1.插入迭代器 4.前向迭代器5.双向迭代器6.随机访问迭代器7.不同容器返回的迭代器类型1.输入 / 输出迭代器2.前向迭代器3.双向迭代器4.随机访问迭代器5.特殊迭代器适配器6.为什么 unordered_set 只提供前向迭代器&#xff1f; 1.迭代器…...