vue elementui el-table实现增加行,行内编辑修改

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

在这里插入图片描述

        <el-card><div slot="header"><span style="font-weight: bold">外来人员名单2</span><el-buttonstyle="float: right"type="primary"@click="insertDetailRow">添加</el-button></div><el-tableref="detailTable"align="center"highlight-cellkeep-sourcestripeborderstyle="width: 100%"max-height="400":data="detailTableData"><el-table-column prop="userName" label="姓名" align="center"><template slot-scope="{ row, $index }"><span v-if="!showEdit[$index]">{{ row.userName }}</span><el-inputv-model="detailTableData[$index].userName"v-if="showEdit[$index]"placeholder="请输入姓名"></el-input></template></el-table-column><el-table-column prop="sex" label="性别" align="center"><template slot-scope="{ row, $index }"><span v-if="!showEdit[$index]">{{ row.sex }}</span><el-selectv-model="detailTableData[$index].sex"v-if="showEdit[$index]"placeholder="请选择性别"><el-optionv-for="item in sexs":label="item.label":value="item.value"></el-option></el-select></template></el-table-column><el-table-column prop="telPhone" label="手机号" align="center"><template slot-scope="{ row, $index }"><span v-if="!showEdit[$index]">{{ row.telPhone }}</span><el-inputv-model="detailTableData[$index].telPhone"v-if="showEdit[$index]"placeholder="请输入手机号"/></template></el-table-column><el-table-column label="操作" align="center" width="220"><template slot-scope="{ row, $index }"><el-buttonv-if="!showEdit[$index]"@click="editDetailRow($index, row)"type="primary"icon="el-icon-edit"circle/><el-buttonv-if="showEdit[$index]"@click="confirmDetailRow($index, row)"type="success"icon="el-icon-check"circle/><el-buttonv-if="!showEdit[$index]"@click="removeDetailRow($index, row)"type="danger"icon="el-icon-delete"circle/></template></el-table-column></el-table></el-card>export default {data() {return {detailTableData: [],   showEdit: [], //控制显示及隐藏sexs: [{ label: '女', value: '女' }, { label: '男', value: '男' }]}},methods: {//添加一行insertDetailRow() {console.info(this.detailTableData)if (this.detailTableData != null && this.detailTableData.length > 0) {if (this.detailTableData[this.detailTableData.length - 1].userName === null ||this.detailTableData[this.detailTableData.length - 1].userName === undefined ||this.detailTableData[this.detailTableData.length - 1].userName.length <= 0) {this.$message({ type: 'error', message: '请将数据填写完整后再新增数据行!' })return false}//现有行取消编辑 this.detailTableData.forEach((ele, i) => {this.$set(this.showEdit, i, false)})}var obj = {userName: '',sex: '',telPhone: ''}this.detailTableData.push(obj)},// 编辑一行editDetailRow(index, row) {this.$set(this.showEdit, index, true)},// 确认编辑confirmDetailRow(index, row) {this.$set(this.showEdit, index, false)},//删除一行removeDetailRow(index, row) {this.$confirm('此操作将永久删除当前信息, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',center: true}).then(() => {this.detailTableData.splice(index, 1)}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})}}
}

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

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

相关文章

代码随想录算法训练营第46期Day43

leetcode.322零钱兑换 class Solution { public: //无限个硬币->完全背包int coinChange(vector<int>& coins, int amount) {vector<int> dp(10010,INT_MAX);//dp代表的在某个数值下最小的硬币数&#xff0c;要求是最小的硬币数&#xff0c;所以初始值要尽可…

面试域——技术面试准备

摘要 来到技术面试这环节有两种情况&#xff0c;其一&#xff1a;这场技术面试可能就是一个面试官KPI面试&#xff08;就是面试工作量&#xff0c;这个面试你是不可能过。&#xff09;如今的就业环境下&#xff0c;人力资源部门也是有考核指标。如果遇到这样的面试你就放平心态…

NLP实践项目1——判断推文的负面情绪

数据来源&#xff1a;https://datahack.analyticsvidhya.com/contest/linguipedia-codefest-natural-language-processing-1/?utm_sourceword-embeddings-count-word2veec&utm_mediumbloghttps://datahack.analyticsvidhya.com/contest/linguipedia-codefest-natural-lang…

FPGA开发时,什么情况下使用BRAM,什么情况下使用DRAM

DRAM&#xff1a;Distributed RAM&#xff0c;DRAM是用逻辑单元拼出来的。 BRAM&#xff1a;Block RAM&#xff0c;BRAM是fpga中定制的ram资源。 较大的存储应用&#xff0c;建议用block ram ; 零星的小ram&#xff0c;一般就用distributed ram。但这只是个一般原则&#xff0…

反射、动态代理、SPI机制在RPC框架中应用

Java反射的理解 Java 反射机制是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类中的所有属性和方法&#xff0c;对于任意一个对象&#xff0c;都能够调用它的任意一个方法和属性&#xff1b;这种动态获取的信息以及动态调用对象的方法的功能称为 Java 语…

Cesium基础-(Viewer)

1. Viewer 构造参数介绍 Cesium中的Viewer是用于显示和控制3D场景的核心组件。它提供了创建和管理3D地球模型、加载图像覆盖物、设置相机位置和方向以及处理用户输入等功能。Viewer可以看作是一个带有多种功能的可交互的三维数字地球容器&#xff0c;是任何Cesium应用程序的基…

利用Arcgis进行沟道形态分析

在做项目的时候需要学习到水文分析和沟道形态分析的学习&#xff0c;所以自己摸索着做了下面的工作和内容。如有不对请多指正&#xff01;&#xff01; 一、沟道形态分析概述 沟道形态分析是水文分析的一个重要方面&#xff0c;用于研究河流的形态和特征。沟道形态分析可以帮助…

C# 企业微信机器人推送消息 windows服务应用程序的使用

C# 企业微信机器人推送消息 先添加一个机器人! 然后查看机器人就可以得到一个 webhook 特别特别要注意&#xff1a;一定要保护好机器人的webhook地址&#xff0c;避免泄漏&#xff01; 然后开始写代码 &#xff0c;只需要httpPost 调用一下这个地址就可以发送消息了。 首先我…

Z-BlogPHP显示错误Undefined array key 0 (set_error_handler)的解决办法

今天打开博客的时候&#xff0c;意外发现页面&#xff0c;打开均显示错误&#xff1a;Undefined array key 0 (set_error_handler)。 博客程序采用的是Z-BlogPHP。百度了一圈没有找到解决办法&#xff0c;在官方论坛里也没找到解决办法。 于是开始自己排查原因。我服务器采用…

【vue3|第29期】Vue3中的插槽:实现灵活的组件内容分发

日期&#xff1a;2024年10月24日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉在这里插入代码片得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不…

【分立元件】低阻值电阻器的趋势(Face down type)

低阻值电阻器不仅可正确显示电阻器的阻值,还是小型、大功率产品或散热性优良的产品所必不可少的。 为了应对大功率或提高散热性,一般使用较大贴片尺寸的产品或长边电极型产品。 但是,如果贴片尺寸变大,就需要一定的贴装空间,还会减弱温度循环试验强度。 长边电极型…

利用Docker搭建一套Mycat2+MySQL8一主一从、读写分离的最简单集群(保姆教程)

文章目录 1、Mycat介绍1.1、mycat简介1.2、mycat重要概念1.3、Mycat1.x与Mycat2功能对比1.2、主从复制原理 2、前提准备3、集群规划4、安装和配置mysql主从复制4.1、master节点安装mysql8容器4.2、slave节点安装mysql8容器4.2、配置主从复制4.3、测试主从复制配置 5、安装mycat…

yolov11的onnx模型C++ 调用

yolov11的onnx模型C调用 效果图一、python调用二、onnx模型导出三、python的onnx调用调用检测模型调用分割模型 四、C的onnx模型调用五 、视频流的检测后续 效果图 一、python调用 本文只记录生成的yolov11模型如何调用&#xff0c;其他可参考各种yolov11博客 模型下载&#x…

万年历制作

#include<stdio.h> int main() { int year0, month0, day0, y0, m0&#xff1b; scanf_s("%d %d", &year,&month); //判断闰年 for(y1900;y<year;y) { if ((y % 4 0 && y % 100 ! 0) || y % 400 0) …

C语言[求x的y次方]

C语言——求x的y次方 这段 C 代码的目的是从用户输入获取两个整数 x 和 y &#xff0c;然后计算 x 的 y 次幂&#xff08;不过这里有个小错误&#xff0c;实际计算的是 x 的 (y - 1) 次幂&#xff0c;后面会详细说&#xff09;&#xff0c;最后输出结果。 代码如下: #include…

Apache Paimon Catalog

Paimon Catalog可以持久化元数据&#xff0c;当前支持两种类型的metastore&#xff1a; 文件系统&#xff08;默认&#xff09;&#xff1a;将元数据和表文件存储在文件系统中。hive&#xff1a;在 hive metastore中存储元数据。用户可以直接从 Hive 访问表。 2.2.1 文件系统…

centeros7 编译ffmpeg

使用yum安装的路似乎已经堵住了&#xff0c;请求的镜像全是404或503 1.打开终端并使用yum安装EPEL存储库(Extra Packages for Enterprise Linux)&#xff1a;sudo yum install epel-release2.接下来&#xff0c;使用以下命令来安装FFmpeg&#xff1a;sudo yum install ffmpeg …

remote: HTTP Basic: Access denied

解决方法 输入&#xff1a; git config --system --unset credential.helper 再次进行 Git 操作&#xff0c;输入正确的用户名&#xff0c;密码即可。

static、 静态导入、成员变量的初始化、单例模式、final 常量(Content)、嵌套类、局部类、抽象类、接口、Lambda、方法引用

static static 常用来修饰类的成员&#xff1a;成员变量、方法、嵌套类 成员变量 被static修饰&#xff1a;类变量、成员变量、静态字段 在程序中只占用一段固定的内存&#xff08;存储在方法区&#xff09;&#xff0c;所有对象共享可以通过实例、类访问 (一般用类名访问和修…

OpenHarmony(1)开发环境搭建

一&#xff1a;开源项目 OpenHarmony是由开放原子开源基金会&#xff08;OpenAtom Foundation&#xff09;孵化及运营的开源项目&#xff0c;目标是面向全场景、全连接、全智能时代&#xff0c;基于开源的方式&#xff0c;搭建一个智能终端设备操作系统的框架和平台&#xff0…