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

vue3:十三、分类管理-表格--编辑、新增、详情、刷新

news 来源：原创 2025/7/20 22:56:37

一、效果

实现封装表格的新增、编辑、详情查看，表格刷新功能

实现表格组件中表单的封装

1、新增

如下图，新增页面显示空白的下拉，文本框，文本域，并实现提交功能

2、编辑

如下图，点击行数据，可将行数据展示到编辑弹窗，并实现提交功能

3、详情

如下图，点击行数据，可将行数据展示到详情页弹窗，弹窗数据只读不可编辑

二、初始页面定义、官网参考

1、官网参考

(1)表单组件

Form 表单 | Element Plus

(2)拟态框

Dialog 对话框 | Element Plus

2、初始工作

(1)定义新组件页面

在components中新建一个组件Form.vue

(2)定义新表单组件页面

在components中新建一个组件Table.vue

(3)定义分类数据获取接口页面

在api中新建一个专门获取分类数据的接口category.js

三、实现

1、分类主页面

路径：src/views/CategoryView.vue

(1)父页面定义表单组件项

在分类主页面中定义表格组件需要用到的项

引用vue方法

需要使用变量，即需要引入vue的方法reactive

定义表单项

这里定义一个数组变量formItems，这里展示了表单项的

名称：label
字段名称：field
提示词：placeholder
表单项的类型：type(例如文本框input,文本域textarea,下拉列表select等)
规则：rules（表单项的规则）
下拉的选项：options(包含label:字段名称，value:字段id)

//定义需要的表单数据
const formItems = reactive([{label: '父分类', field: 'pid', placeholder: '请选择父分类', type: 'select',rules: [{ required: true, message: '请选择父分类', trigger: 'change' },],options: [{ label: '无', value: 0 }]},{label: '分类名称', field: 'name', placeholder: '请输入分类名称', type: 'text',rules: [{ required: true, message: '请输入分类名称', trigger: 'blur' },{ min: 3, max: 5, message: '名称长度请在3-5字符之间', trigger: 'blur' },]},{ label: '分类描述', field: 'desc', type: 'textarea', placeholder: '请输入分类描述' },
])

(2)定义表单项中下拉数据

定义api

新建接口

新建期望

返回数据

{"code": 1,"msg": "成功","data": [{"id": 1,"pid": 0,"name":"分类1","desc":"父分类1"},{"id": 2,"pid": 0,"name":"分类2","desc":"父分类2"},{"id": 3,"pid": 0,"name":"分类3","desc":"父分类3"},]
}

接口页面写入接口

在api/category.js中获取get请求，并且对父分类列表进行查询，并导出

import { get } from '@/utils/request'//查询分分类的信息
export function getCategoryPid() {return get('/category/pidlist')
}

方法引入

页面获取父分类列表

执行获取父分类列表的方法

成功的话，将获取的数组整合成我们需要的下拉列表的格式{label:xxx,value:xxx}

这里使用map对数组进行循环，然后对表单项的首项(这里的首项就是下拉列表)进行数据插入(也就是每一项提取出label和value然后将数据插入到首项的options中)

//定义父级分类
getCategoryPid().then(res => {if (res.code == 1) {res.data.map(item => {formItems[0].options.push({ label: item.name, value: item.id })})}
})

(3)表单项数组传入表格

将获取的表单数据项通过参数传入Tables组件中

2、表格组件页面Table.vue

路径：src/components/Table.vue

(1)参数处理

将父页面传来的表单的数据，在表格组件中进行定义

(2)表单组件

引用方法

表单的使用

在视图层直接写入弹窗，将表单组件写入弹窗

弹窗的v-model:dialogFromVisible控制弹窗是否显示，是一个布尔值 (true显示，false隐藏)，
标题为变量dialogFromTitle
表单组件：
- ref用于父组件调用子组件的方法,这里使用formComponentRef定义
- 传递父组件获取的表单项formItems，
- 写入组件提交所需要用到的路径submitUrl，
- 写入表格传递给表单模式mode(新增/编辑/详情)

<!-- 弹窗 -->
<el-dialog v-model="dialog

vue3:十三、分类管理-表格--编辑、新增、详情、刷新

一、效果实现封装表格的新增、编辑、详情查看，表格刷新功能实现表格组件中表单的封装 1、新增如下图，新增页面显示空白的下拉，文本框，文本域，并实现提交功能 2、编辑如下图，点击行数据，可将行数据展示到编辑弹窗，并实现提交功能 3、详情如下图，点击行数据，…...

编程日记 2025/7/20 22:56:37

一周快讯 | 银发文娱旅游一周新鲜事

银发文娱旅游一周新鲜事一周银发文娱旅游产业资讯速览星期一 5月19日 1 企业动态同方全球人寿等共建一站式康养服务生态东秀星健康养老产业等合作赋能康养产业，开发“旅居养老”项目欧莱雅等合作将推出银发族形象管理课程 2 行业风向总投资10亿&a…...

编程日记 2025/7/2 6:51:46

C++寻位映射的奇幻密码：哈希

文章目录 1.什么是哈希？2.哈希的常见实现方法2.1 直接定址法2.2 除留余数法 3.哈希冲突4.哈希冲突的解决4.1 闭散列4.1.1 线性探测4.1.1.1 哈希表的基本数据结构4.1.1.2 哈希表的key转换4.1.1.3 哈希表的插入4.1.1.4 哈希表的查找4.1.1.5 哈希表的删除 4.1.2 二次探…...

编程日记 2025/7/2 6:51:45

Spring Boot 集成 druid，实现 SQL 监控

文章目录背景Druid 简介监控统计 StateFilter其它 Filter详细步骤第 1 步：添加依赖第 2 步：添加数据源配置【通用部分】第 3 步：添加监控配置【关键部分】第 3 步：访问 druid 页面参考背景 😂 在 Code Review 过程中发现，经常有开发会忘记给表加索引。这就导致，生产运…...

编程日记 2025/7/2 6:51:43

从零开始学习three.js（21）：一文详解three.js中的矩阵Matrix和向量Vector

一、三维世界的数学基石在Three.js的三维世界里，所有视觉效果的实现都建立在严密的数学基础之上。其中向量（Vector） 和矩阵（Matrix） 是最核心的数学工具，它们就像构建数字宇宙的原子与分子，支…...

编程日记 2025/7/2 6:51:41

无需笔墨之功，锦绣SQL自成桥——QuickAPI古法炼数据秘术

楔子：锦绣SQL，化身为桥昔有匠人苦修代码之术，欲通数据库与前朝之界，然笔耕不辍，耗时弥久。今有秘器名曰QuickAPI，但凭三寸SQL文，顷刻间筑起数据虹桥。纵使不谙代码之道者，亦可挥毫…...

编程日记 2025/7/2 6:51:40

模块与包的导入

一、导入官方库我们复盘下学习python的逻辑，所谓学习python就是学习python常见的基础语法学习你所处理任务需要用到的第三方库类别典型库解决的问题学习门槛基础工具os、sys、json操作系统交互、序列化数据（如读写 JSON 文件）低科学计算n…...

编程日记 2025/7/2 6:51:38

智能文档抽取技术可以应用于哪些场景？

近日，合合信息编撰并发布了《2025智能文档技术与应用白皮书》。该书中不仅深度解析技术原理与创新突破，更聚焦金融、法律、制造等行业的典型场景，结合典型案例揭示技术如何赋能合同智能审查、票据自动化处理、知识库构建等业务场景&#xff0…...

编程日记 2025/7/2 6:51:36

实践促成长:成都理工大学华清远见成都中心实训

2025年5月, 华清远见成都中心迎来了成都理工大学大数据管理与应用专业23级以及电子商务22级的同学们，以实践为导向、以提升能力为目标的校企合作实训活动在此展开，为同学们开启了一段充满挑战与收获的学习之旅。华清远见成都中心为两个专业的同学们量身…...

编程日记 2025/7/18 11:43:36

北京本地 SEO 推广：从技术成本到效果转化的深度拆解

在数字化营销的浪潮中，北京本地企业对 SEO 推广的需求日益增长。然而，SEO 推广服务的价格参差不齐，效果也难以预估。本文将从技术实现、成本构成等角度，深入剖析北京本地 SEO 推广服务的价格与效果，baidu0048为企业选择…...

编程日记 2025/7/2 6:51:33

JavaScript 中的五种继承方式进行深入对比

文章目录前言JavaScript 五种继承方式对比原型链继承构造函数继承组合继承寄生组合继承ES6 class extends 继承五种继承方式对比表前言对 JavaScript 中的五种继承方式进行深入对比：原型链继承、构造函数继承、组合继承、寄生组合继承、以及 ES6 的 class extends。内容将…...

编程日记 2025/7/2 6:51:31

CAU数据库class2 SQL语言

SQL分类 DDL 数据库操作查询数据库： 查询所有数据库 show databases; 查询名字里有t的数据库 show databases like %t%;查询名字以t为结尾的数据库 show databases like %t;查看数据库name是怎么创建出来的 show create database name;创建数据库创建…...

编程日记 2025/7/2 6:51:30

软考教材重点内容信息安全工程师 25章移动安全 26章大数据安全

第 25 章移动应用安全需求分析与安全保护工程移动互联网技术基本组成如图 25-1 所示，包括三个部分:一是移动应用，简称 App;二是通信网络，包括无线网络、移动通信网络及互联网;三是应用服务端，由相关的服务器构成，负责…...

编程日记 2025/7/17 14:07:05

有关Groutine无限创建的分析

有关Groutine无限创建的分析文章目录有关Groutine无限创建的分析从操作系统分析进程、线程、协程的区别进程内存线程内存执行单元 cpu切换成本协程切换成本线程切换成本内存占用 Go程是否可以无限创建不控制go程创建引发的问题简单方式控制go程创建channel有buffersync.WaitG…...

编程日记 2025/7/2 6:51:26

FANUC发那科焊接机器人智能气阀

在现代工业生产中，焊接技术的发展日新月异，其中发那科（FANUC）焊接机器人以其高精度和稳定性受到了广泛应用。而智能气阀作为发那科焊接机器人的重要组成部分，在提升焊接效率和质量方面发挥着不可忽视的作用。工作原理…...

编程日记 2025/7/2 6:51:25

软件架构风格系列（7）：闭环控制架构

文章目录引言一、闭环控制架构：让系统学会“自我调节”的魔法（一）从温控系统理解核心原理（二）核心组件解析二、架构设计图：闭环控制的“四大核心环节”三、Java实战：手写一个智能温控系统&…...

编程日记 2025/7/2 6:51:23

Java合并两个列表到目标列表，并且进行排序

可以通过使用addAll()方法将两个列表合并到目标列表中。以下是实现代码： java 复制下载 List<LedgerRecord> rkRecordList warehouseMapper.selectLedgerRkRecordByMaterialNo(materialNo); List<LedgerRecord> ckRecordList warehouseMapper.se…...

编程日记 2025/7/16 19:41:26

关于在Unity项目中使用Post Processing插件打包到web端出现的问题

关于在Unity项目中使用Post Processing插件打包到web端出现的问题解决方法：是不激活摄像机上的Post Processing有关组件，拉低场景中的Directional Light平行光的强度进行web端打包。 （烘焙灯光时是可以激活。） web端支持这个Pos…...

编程日记 2025/7/2 6:51:20

智象科技：自动化模块驱动IT运维效能升级

智象自动化模块概览智象科技的一站式IT运维平台中的自动化模块，是企业数字化转型的强大助推器。该模块集成了IT运维作业的流程编排、脚本编排，各类运维资源配置项目和脚本的合规巡检，以及基础信息、监控指标的巡检配置等自动化管理&#xff…...

编程日记 2025/7/2 6:51:18

GPU状态监控

GPU 状态监控对比： GPU项目名称项目名称单机多 GPUGPU状态监控以时间为横轴展示GPU被占用的动态过程，但不显示具体时间单机多 GPUGPU 实时监控服务多卡GPU统一展示，数据简洁清晰多机多 GPU服务器集群监控面板可以同时监控多个服务器上的GPU…...

编程日记 2025/7/14 18:15:58

VS2017编译openssl3.0.8

openssl是一个功能丰富且自包含的开源安全工具箱。它提供的主要功能有：SSL协议实现(包括SSLv2、SSLv3和TLSv1)、大量软算法(对称/非对称/摘要)、大数运算、非对称算法密钥生成、ASN.1编解码库、证书请求(PKCS10)编解码、数字证书编解码、CRL编解码、OCSP协议、数字证书验证、P…...

编程日记 2025/7/2 6:51:15

构建高效移动端网页调试流程：以 WebDebugX 为核心的工具、技巧与实战经验

现代前端开发早已不仅仅局限于桌面浏览器。随着 Hybrid 应用、小程序、移动 Web 的广泛应用，开发者日常面临的一个关键挑战是：如何在移动设备上快速定位并解决问题？ 这不再是“打开 DevTools 查查 Console”的问题，而是一个关于设…...

编程日记 2025/7/2 6:51:13

前缀和——和为K的子数组

作者感觉本题稍稍有点难度，看了题解也思考了有一会TWT 显然，暴力我们是不可取的，但这里我们可以采取一种新的遍历数组形式，从后向前，也就是以i位置为结尾的所有子数组，这个子数组只统计i位置之前的。然后…...

编程日记 2025/7/12 19:07:45

web常见的攻击方式

web攻击（webAttack）是针对用户上网行为或网站服务器等设备进行攻击的行为，如植入恶意代码、修改网站权限、获取网站用户隐私等等，即使是代码在的很小的bug也有可能导致隐私信息被泄漏，站点安全就是保护站点不受未授权的…...

编程日记 2025/7/2 6:51:10

为什么wifi有信号却连接不上？

WiFi有信号，无法连接WiFi网络的可能原因及解决方法： 1.长时间使用路由器，路由器可能会出现假死现象。重启无线路由器即可。 2.认证类型不合适。尝试更改路由器的认证类型，选择安全的 “WPA2-PSK” 类型模式要好，下面…...

编程日记 2025/7/14 8:36:13

CVE-2015-4553 Dedecms远程写文件首页访问 http://192.168.1.3/install/index.php?step11&insLockfilea&s_langa&install_demo_name…/data/admin/config_update.php这句话会跳转到http://updatenew.dedecms.com/base-v57/dedecms/demodata.a.txt中读取内容写入…...

编程日记 2025/7/2 6:51:06

如何评估开源商城小程序源码的基础防护能力？

在电商行业快速发展的背景下，开源商城已经为更多企业或者开发者的首选方案，不过并不是所有的开源商城源码都能让人放心使用，今天就带大家一起了解下如何评估开源商城小程序源码的基础防护能力，帮助大家更好地筛选安全性高的商城源…...

编程日记 2025/7/2 6:51:05

音视频之H.265/HEVC率失真优化

H.265/HEVC系列文章： 1、音视频之H.265/HEVC编码框架及编码视频格式 2、音视频之H.265码流分析及解析 3、音视频之H.265/HEVC预测编码 4、音视频之H.265/HEVC变换编码 5、音视频之H.265/HEVC量化 6、音视频之H.265/HEVC环路后处理 7、音视频之H.265/HEVC熵编…...

编程日记 2025/7/2 6:51:03

linux安装git

[rootMiWiFi-RC06-srv rpm-gpg]# yum install git 已加载插件：fastestmirror Repository base is listed more than once in the configuration Repository updates is listed more than once in the configuration Repository extras is listed more than once in …...

编程日记 2025/7/2 6:51:02

Node 服务监控及通过钉钉推送告警提醒

背景：需要监控某个服务是否在线，运行是否正常；实现步骤： 1、需要在项目中内置一个可以监控的健康状态接口，详情可参考之前的文章：使用 PM2 启动node服务，并添加监控接口_node pm2-CSDN博客 2、再添加另外一个进程来监控这个接口是否正常在线，然后通过钉钉推送异常消…...

编程日记 2025/7/2 6:51:00

健康生活指南：从日常细节开启养生之旅

在数字化与快节奏交织的时代，健康危机常潜伏于日常的点滴疏忽中。想要保持良好的身体状态，不妨从这些容易被忽视的生活细节入手，开启科学养生之路。长期伏案工作和沉迷电子设备，让颈椎与腰椎承受巨大压力。调整办公环境&#…...

编程日记 2025/7/14 9:08:06

Node-Red通过Profinet转ModbusTCP采集西门子PLC数据配置案例

一、内容简介本篇内容主要介绍Node-Red通过node-red-contrib-modbus插件与ModbusTCP设备进行通讯，这里Profinet转ModbusTCP网关作为从站设备，Node-Red作为主站分别从0地址开始读取10个线圈状态和10个保持寄存器，分别用Modbus-Read、Modbus-…...

编程日记 2025/7/2 6:50:57

# YOLOv4：目标检测的全新突破

YOLOv4：目标检测的全新突破在目标检测领域，YOLO（You Only Look Once）系列算法一直以其高效的检测速度和出色的性能受到广泛关注。从最初的 YOLOv1 到如今的 YOLOv4，这一系列算法不断进化，为实时目标检测和…...

编程日记 2025/7/10 22:09:05

计算机视觉设计开发工程师学习路线

以下是一条系统化的计算机视觉（CV）学习路线，从基础到进阶，涵盖理论、工具和实践，适合逐步深入，有需要者记得点赞收藏哦： 相关学习：python深度学习，python代码定制 python…...

编程日记 2025/7/7 12:32:15

CLIP：论文阅读 -- 视觉模型

更多内容：XiaoJ的知识星球目录 1.CLIP概述2.CLIP的方法2.1. 自然语言监督2.2. 创建足够大的数据集2.3. 选择有效的预训练方法2.4. 选择和缩放模型1）CLIP模型选择：2）模型缩放 2.5 训练 3.CLIP 核心伪代码3.1. CLIP伪代码3.2. CLIP…...

编程日记 2025/7/20 21:19:40

26、DAPO论文笔记（解耦剪辑与动态采样策略优化，GRPO的改进）

DAPO论文笔记 1、项目背景与目标2、DAPO算法与关键技术3、过长响应奖励塑形（Overlong Reward Shaping）**一、问题背景：截断惩罚的缺陷****二、解决方案：分层惩罚与软截断策略**1. **过长过滤：屏蔽无效惩罚**2. **软过长…...

编程日记 2025/7/18 1:10:41

【框架安装】win10 配置安装GPU加速的tensorflow和keras教程

本机配置 win10 4090，需要安装最后支持windows GPU加速的最后版本tensorflow2.10 重点安装命令 pip install tensorflow-gpu2.10.0 protobuf3.19.6 numpy1.23.5 pip install keras2.10.0 pip install keras-cv0.3.5 pip install tensorflow-addons0.17.1conda li…...

编程日记 2025/7/17 18:22:15

整合安全能力：观测云进一步强化数据价值

在 2025 年 5 月 13 日的观测云年度发布会上，观测云发布了 GuanceDB 3.0 全新数据引擎。这次更新标志着观测云进一步整合了云端安全能力，帮助用户进一步挖掘数据的价值。全新底座：GuanceDB 3.0，数据驱动的安全基石 GuanceDB 3.…...

编程日记 2025/7/20 1:22:23

质检LIMS系统检测数据可视化大屏全流程提效 + 合规安全双保障方案

在质检实验室的数字化转型浪潮中，「数据看得见、问题找得准、决策下得快」成为衡量管理水平的核心标准。然而传统模式下，检测数据分散在设备日志、纸质记录和 Excel 表格中，管理者如同在迷雾中摸索，决策失误率高达 30% 以上。一、…...

编程日记 2025/7/17 11:25:57

企业销售管理痛点解析与数字化解决方案

在数字化转型浪潮中，传统销售模式正面临多重挑战： ▫️ 数据决策滞后：缺乏实时市场洞察，热销趋势依赖经验预判，战略响应慢半拍 ▫️ 客户管理碎片化：信息散存于纸质记录 / 聊天窗口，跟进细节遗漏…...

编程日记 2025/7/19 19:37:53

关于海光22DC4_2主板获取usb3.0端口信息重复问题的解决方案

需求使用qt程序实现以下功能：检查主机所有usb端口是否可用，检查方法为：使用同一个3.0u盘，依次插入usb所有的端口，读取以下代码中所写的端口信息 #include <libusb-1.0/libusb.h>//只保留键鼠和u盘的设备 if (…...

编程日记 2025/7/16 17:51:03

GStreamer （三）常⽤插件

常⽤插件 1、Source1.1、filesrc1.2. videotestsrc1.3. v4l2src1.4. rtspsrc和rtspclientsink 2、 Sink2.1. filesink2.2. fakesink2.3. xvimagesink2.4. kmssink2.5. waylandsink2.6. rkximagesink2.7. fpsdisplaysink 3 、视频推流/拉流3.1. 本地推流/拉流3.1.1 USB摄像头3.1…...

编程日记 2025/7/11 5:24:08