vue elementui table编辑表单时,弹框增加编辑明细数据

需求:
前端进行新增表单时,同时增加表单的明细数据。明细数据部分,通过弹框方式增加或者编辑。
效果图:
在这里插入图片描述

在这里插入图片描述

代码:

   <!-- 新增主表弹窗 Begin --><el-dialog:title="titleInfo"top="5vh"centerwidth="85%":close-on-click-modal="false":close-on-press-escape="false":visible.sync="dialogVisible"><span><el-formref="form":rules="formRules":model="form"style="margin: 0 auto"label-width="32%"><el-row :gutter="24"><el-col :span="12"><el-form-item label="申请日期:" prop="applyDate"><el-date-pickerv-model="form.applyDate"style="width: 80%"clearabletype="date"value-format="yyyy-MM-dd"placeholder="请选择申请日期"/></el-form-item></el-col><el-col :span="12"><el-col :span="14"><el-form-itemprop="applyDept"label="申请部门:"label-width="30%"><el-selectv-model="form.applyDept"style="width: 80%":disabled="true"><el-optionv-for="item in deptLists":key="item.id":label="item.departName":value="item.orgCode"/></el-select></el-form-item></el-col><el-col :span="10"><el-form-itemprop="applyUsername"label="申请人:"label-width="30%"><el-inputv-model="form.applyUsername"style="width: 70%":disabled="true"/></el-form-item></el-col></el-col></el-row></el-form><el-card><div slot="header"><span style="font-weight: bold">外来人员名单</span><el-buttonstyle="float: right"type="primary"@click="insertExterRow">添加</el-button></div><el-tableref="exterTable"align="center"highlight-cellkeep-sourcestripeborderstyle="width: 100%"max-height="400":data="exterTableData":edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"><el-table-column prop="useUser" label="姓名" align="center" /><el-table-column prop="idCard" label="身份证号" align="center" /><el-table-column prop="phone" label="手机号" align="center" /><el-table-column label="操作" align="center" width="220"><template slot-scope="scope"><el-buttonmode="text"icon="el-icon-edit"@click="editExterRow(scope.$index, scope.row)"/><el-buttonmode="text"icon="el-icon-delete"@click="removeExterRow(scope.$index, scope.row)"/></template></el-table-column></el-table></el-card></span><span slot="footer" class="dialog-footer"><el-button @click="cancel">取消</el-button><el-button type="success" :loading="saveLoading" @click="save">保存</el-button></span></el-dialog><!-- 新增主表弹窗 End --><!-- 外来人员弹窗 Start--><el-dialog:title="exterTitleInfo"top="5vh"centerwidth="50%":close-on-click-modal="false":close-on-press-escape="false":visible.sync="exterDialogVisible"><span><el-formref="exterForm":rules="exterFormRules":model="exterForm"style="margin: 0 auto"label-width="25%"><el-row :gutter="24"><el-col :span="24"><el-form-item label="姓名:" prop="useUser"><el-inputv-model="exterForm.useUser"placeholder="请输入姓名"style="width: 80%"/></el-form-item></el-col></el-row><el-row :gutter="24"><el-col :span="24"><el-form-item label="身份证号:" prop="idCard"><el-inputv-model="exterForm.idCard"placeholder="请输入身份证号"style="width: 80%"/></el-form-item></el-col></el-row><el-row :gutter="24"><el-col :span="24"><el-form-item label="手机号:" prop="phone"><el-inputv-model="exterForm.phone"placeholder="请输入手机号"style="width: 80%"/></el-form-item></el-col></el-row></el-form></span><span slot="footer" class="dialog-footer"><el-button @click="cancelExter">取消</el-button><el-button type="success" :loading="exterSaveLoading" @click="saveExter">保存</el-button></span></el-dialog><!--外来人员弹窗 End-->export default {data() {return {// 表单form: {},exterForm: {},exterTableData: [],//form表单验证规则exterFormRules: {}}},methods: {// 添加一行,外来人员信息insertExterRow() {this.exterTitleInfo = '外来人员信息新增'this.exterForm = {}this.exterDialogVisible = truethis.selectExterRow = nullthis.$nextTick(() => {this.$refs.exterForm.clearValidate() // 移除校验结果})},// 编辑一行,外来人员信息editExterRow(index, row) {this.exterTitleInfo = '外来人员信息编辑'this.exterDialogVisible = truethis.selectExterRow = rowthis.exterForm = Object.assign({}, row)this.$nextTick(() => {this.$refs.exterForm.clearValidate() // 移除校验结果})},// 删除一行,外来人员信息removeExterRow(index, row) {this.$confirm('此操作将永久删除当前信息, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',center: true}).then(() => {this.exterTableData.splice(index, 1)}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})},// 保存外来人员信息saveExter() {this.$refs.exterForm.validate((valid) => {if (valid) {this.exterSaveLoading = trueif (this.selectExterRow) {Object.assign(this.selectExterRow, this.exterForm)} else {this.exterTableData.push(this.exterForm)}this.exterSaveLoading = falsethis.exterDialogVisible = false} else {return false}})},cancelExter() {this.exterForm = {}this.exterDialogVisible = false}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/881944.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql innodb 引擎如何直接复制数据库文件?

mysql innodb 引擎如何直接复制数据库文件&#xff1f;介绍如下&#xff1a; 1、首先找到数据库文件所在位置 一般可以看my.conf/my.ini配置的文件的“datadir” 看示例&#xff1a; “MAMP”在Macos下的数据库文件位置&#xff1a; /Library/Application Support/appsolu…

想要搭建陪玩系统前后端该如何去做?uniapp后端php开发开源圈子源码uniapp社区论坛源码下载源码网

陪玩系统 陪玩日记 同城陪玩 陪玩工作室 陪聊 app开发 线下伴游 伴游系统 运营线下陪玩 轻资产创业 城市玩伴 小程序开发 app开发 城市玩伴 同城陪玩 运营陪玩系统 线下陪玩系统开发 陪玩软件 私人向导 线下陪玩系统 单身经济 助教 搭子 系统部署与配置 服务器环境配置&#…

CTFHUB技能树之SQL——字符型注入

开启靶场&#xff0c;打开链接&#xff1a; 直接指明是SQL字符型注入&#xff0c;但还是来判断一下 &#xff08;1&#xff09;检查是否存在注入点 1 and 11# 返回正确 1 and 12# 返回错误 说明存在SQL字符型注入 &#xff08;2&#xff09;猜字段数 1 order by 2# 1 order…

QT--单选按钮(QRadioButton)和复选按钮(QCheckBox)

在Qt中&#xff0c;单选按钮&#xff08;QRadioButton&#xff09;和复选按钮&#xff08;QCheckBox&#xff09;是两种常用的用户界面控件&#xff0c;它们的主要区别在于选择行为和用途&#xff1a; QRadioButton&#xff08;单选按钮&#xff09; 选择行为&#xff1a;单选…

在 Rocky Linux 9.x 上安装 Docker CE

能看到这篇文章的同志们&#xff0c;应该是目前正在学习容器化技术或者工作中正好在使用Docker&#xff0c;为了让大家能提升自己的学习工作效率&#xff0c;根据本文章的记录来操作&#xff0c;相信能少走很多弯路&#xff0c;那就不费话了&#xff0c;直接开干。 开干之前&am…

Gin框架操作指南01:开山篇

Gin是目前最流行&#xff0c;性能最好的的GoWeb框架&#xff0c;几乎成为了学习GoWeb必备的知识。本人最近也在学Gin&#xff0c;在b站搜了很多教程&#xff0c;发现有的教程不够详细&#xff0c;有的教程工具包安装有问题&#xff0c;而官方文档的很多示例代码又不全&#xff…

抖音解压视频素材宝库

在快节奏的生活中&#xff0c;解压视频成为抖音上的热门内容类型&#xff0c;想要制作出精彩的解压视频&#xff0c;优质素材必不可少。今天&#xff0c;为大家推荐几个超棒的抖音解压视频素材网站&#xff0c;让你的创作之路轻松无忧&#xff01; 蛙学网 作为国内知名的短视频…

Elasticsearch Suggester

Elasticsearch里设计了4 种类别的 Suggester Term Suggester&#xff1a;词条建议器。对给输入的文本进进行分词&#xff0c;为每个分词提供词项建议。Phrase Suggester&#xff1a;短语建议器&#xff0c;在term的基础上&#xff0c;会考量多个term之间的关系Completion Sugg…

深度解析计数排序:原理、特性与应用

目录 &#x1f4af;引言 &#x1f4af;计数排序的原理 ⭐核心概念 ⭐工作流程 1.确定计数范围 2.统计元素出现次数 3.计算累计计数 4.放置元素到正确位置 &#x1f4af;计数排序的实现 ⭐代码示例&#xff08;以 C 为例&#xff09; ⭐时间复杂度分析 ⭐稳定性分析…

patch补丁命令学习

1.介绍 patch 是一个 Unix/Linux 工具&#xff0c;用于将补丁文件应用到原始文件中&#xff0c;从而更新文件内容。常用于软件开发中&#xff0c;特别是在维护和分发软件补丁时。 2.生成和应用patch文件 2.1 diff命令 :~$ cat testfile1 Hello,This is the firstfile! :~$ …

【AI学习】Mamba学习(七):HiPPO通用框架介绍

HiPPO这篇论文《HiPPO: Recurrent Memory with Optimal Polynomial Projections》&#xff0c;提出了一个通用框架。 我们再重新看一下论文的摘要&#xff1a; 从连续数据中学习的一个核心问题是&#xff0c;随着更多数据的处理&#xff0c;以增量方式表示累积历史。我们介绍了…

Qt中加入UI文件

将 UI 文件整合到 Qt 项目 使用 Qt Designer 创建 UI 文件&#xff1a; 在 Qt Creator 中使用 Qt Designer 创建 UI 文件&#xff0c;设计所需的界面。确保在设计中包含所需的控件&#xff08;如按钮、文本框等&#xff09;&#xff0c;并为每个控件设置明确的对象名称&#xf…

生信分析进阶11 - 使用IMPUTE2进行预定相和基因型填充

1. IMPUTE2进行基因型填充 软件安装参考:生信软件38 - 基因型填充软件IMPUTE2 使用IMPUTE2与参考面板的最佳方法是向程序提供所有可用的单倍型,并让它选择使用哪些单倍型。 IMPUTE2不使用群体标签或个体之间相关性的其他全基因组数据,无论是对于参考单倍型还是被填充的个…

「规模焦虑」如影随形,库迪咖啡想靠便捷店突围能行吗?

作者 | 辰纹 来源 | 洞见新研社 “我有一个广东的小兄弟&#xff0c;做了9年的奶茶&#xff0c;后来因为觉得咖啡是一个上升期的赛道&#xff0c;所以毅然决然拿了45万加盟了库迪咖啡&#xff0c;结果全亏损完了&#xff0c;相当于只买了一个配方。” 抖音博主茶饮圈大山哥分…

Vite创建Vue3项目以及Vue3相关基础知识

1.创建Vue3项目 1.运行创建项目命令 # 使用 npm npm create vitelatest2、填写项目名称 3、选择前端框架 4、选择语法类型 5、按提示运行代码 不出意外的话&#xff0c;运行之后应该会出现 下边这个页面 6.延伸学习&#xff1a;对比webpack和vite&#xff08;这个是面试必考…

python+Mosh网课笔记01

太久没写python代码了&#xff0c;学机器学习重新拾起python&#xff0c;笔记比较简陋。 参考&#xff1a;mosh的python教程 一、入门 用vscode编写代码。下载了autopep8插件用于代码格式化。下载了pylint插件用于代码报错提示。 二、基本类型 int&#xff0c;bool&#x…

Shiro认证

1. Shiro简介 Shiro是一个强大且灵活的Java安全框架&#xff0c;专注于认证、授权、加密、会话管理等功能&#xff0c;能够无缝集成到现有的应用程序中。相比Spring Security&#xff0c;Shiro的学习曲线较为平缓&#xff0c;配置简单 (1) Shiro特性 认证&#xff08;Authen…

节流函数throttle和防抖函数debounce

防抖函数&#xff1a;用于控制函数的执行频率&#xff0c;n秒后再执行&#xff0c;一定时间内&#xff0c;只执行最后触发一次&#xff0c;若n秒内重复触发&#xff0c;则重新计时。应用场景&#xff1a; 输入框输入事件、按钮点击事件、浏览器窗口大小调整事件等&#xff0c;手…

UI自动化测试示例:python+pytest+selenium+allure

重点应用是封装、参数化&#xff1a; 比如在lib文件夹下&#xff0c;要存储封装好的方法和必要的环境变量&#xff08;指网址等&#xff09; 1.cfg.py:封装网址和对应的页面 SMP_ADDRESS http://127.0.0.1:8234SMP_URL_LOGIN f{SMP_ADDRESS}/login.html SMP_URL_DE…

【微服务】springboot远程docker进行debug调试使用详解

目录 一、前言 二、线上问题常用解决方案 2.1 微服务线上运行中常见的问题 2.2 微服务线上问题解决方案 2.3 远程debug概述 2.3.1 远程debug原理 2.3.2 远程debug优势 三、实验环境准备 3.1 搭建springboot工程 3.1.1 工程结构 3.1.2 引入基础依赖 3.1.3 添加配置文…