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

基于el-table实现行内增删改

实现效果:

在这里插入图片描述

核心代码:

<el-table :data="items"style="width: 100%;margin-top: 16px"border:key="randomKey"><el-table-column label="计划名称"property="name"><template slot-scope="{row}"><template v-if="row.edit"><el-input v-model="row.name"></el-input></template><span v-else>{{ row.name }}</span></template></el-table-column><el-table-column label="计划完成时间"property="executionDate" width="175"><template slot-scope="scope"><el-date-picker v-if="scope.row.edit" style="width: 153px;" type="date"v-model="scope.row.timeEnd"></el-date-picker><span v-else>{{ parseTime(scope.row.timeEnd) }}</span></template></el-table-column><el-table-column label="协同人"property="leaderList"><template slot-scope="scope"><template v-if="scope.row.edit"><el-selectv-model="scope.row.leaderList"clearable filterable multiple><el-optionv-for="item in userList":key="item.userId":label="item.nickname":value="item.userId"></el-option></el-select></template><span v-else>{{ scope.row.leaderName }}</span></template></el-table-column><el-table-column label="执行人" width="80"><template><span>{{ $store.getters.name }}</span></template></el-table-column><el-table-column align="center" label="操作" width="100"><template slot-scope="{row,column,$index}"><el-buttonv-if="row.edit"type="success" icon="el-icon-check" circlesize="small"@click="confirmEdit(row)"></el-button><el-buttonv-if="row.edit"icon="el-icon-close" circlesize="small"@click="cancelEdit(row)"></el-button><el-buttontype="primary" icon="el-icon-edit" circlev-if="!row.edit"size="small"@click="row.edit=!row.edit"></el-button><el-buttontype="danger" icon="el-icon-delete" circlesize="small" @click="handleDelete($index)"v-if="!row.edit"></el-button></template></el-table-column></el-table></div><div style="display: flex;margin-top: 28px;justify-content: center;"><el-button @click="addSon" size="small" icon="el-icon-plus">添加子计划</el-button></div>

Method:

cancelEdit(row) {row.name = row.oldNamerow.leaderList = row.oldLeaderListrow.timeEnd = row.oldTimeEndrow.leaderName = row.oldLeaderNamerow.edit = falsethis.$message({message: '已恢复原值',type: 'warning'})},confirmEdit(row) {row.edit = falserow.oldName = row.namerow.oldLeaderList = row.leaderListrow.oldTimeEnd = row.timeEndlet arr = []row.leaderList.forEach(i => {let userName = this.userList.find(({userId}) => userId === i).nicknamearr.push(userName)})row.leaderName = arr.join()row.oldLeaderName = row.leaderNamethis.$message({message: '修改成功',type: 'success'})},handleDelete(index) {this.items.splice(index, 1)},addSon() {this.items.push({name: null,timeEnd: null,leaderList: [],leaderName: null,edit: true})},

相关文章:

基于el-table实现行内增删改

实现效果&#xff1a; 核心代码&#xff1a; <el-table :data"items"style"width: 100%;margin-top: 16px"border:key"randomKey"><el-table-column label"计划名称"property"name"><template slot-scope&q…...

《霍格沃茨之遗》推荐购买吗 《霍格沃茨之遗》不支持Mac电脑怎么办 crossover24软件值得买吗 crossover中文官网

《霍格沃茨之遗》作为一款期待已久的游戏&#xff0c;自发布以来就吸引了无数玩家的目光。它以哈利波特系列为背景&#xff0c;提供了一个沉浸式的魔法世界体验&#xff0c;让玩家能够探索广阔的霍格沃茨魔法学校&#xff0c;体验魔法学习与战斗&#xff0c;解开古老谜团的乐趣…...

神经网络代码实现(用手写数字识别数据集实验)

目录 一、前言 二、神经网络架构 三、算法实现 1、导入包 2、实现类 3、训练函数 4、权重参数矩阵初始化 5、参数矩阵变换向量 6、向量变换权重参数矩阵 7、进行梯度下降 7.1、损失函数 7.1.1、前向传播 7.2、反向传播 8、预测函数 四、完整代码 五、手写数字识别 一、前言 …...

菜鸟笔记-Python函数-linspace

linspace 是 NumPy 库中的一个函数&#xff0c;用于生成具有指定数量的等间距样本的数组。它的名字来源于“linear space”&#xff08;线性空间&#xff09;&#xff0c;因为它在指定的范围内均匀地生成数值。 linspace 函数的基本语法如下&#xff1a; numpy.linspace(star…...

为什么我们应该使用QGIS

QGIS地理信息系统是免费的开源软件&#xff0c;已成为创建地图和分析空间数据的强大工具。在本文中&#xff0c;我们将探讨 QGIS 为地图公司带来的诸多好处&#xff0c;以及为什么使用它可以促进您的业务成功。使用QGIS的好处&#xff1a; 1. 免费开源软件&#xff0c;但从长远…...

用Python实现办公自动化(自动化处理Excel工作簿)

自动化处理Excel工作簿 &#xff08;一&#xff09;批量生产产品出货清单 以“出货统计表”为例&#xff0c; 需求&#xff1a;将出货记录按照出货日期分类整理成多张出货清单 “出货统计表数据案例” “产品出货清单模板” 1.提取出货统计表的数据 “Python程序代码” # 使用…...

BaseDao入门使用

目录 一、什么是BaseDao?BaseDao的优点&#xff1a;BaseDao用来做什么操作&#xff1f; 二、BaseDao封装增删改查 案例演示&#xff1a;1、java与数据库进行连接2、连接后可对其进行操作&#xff08;增、删、改&#xff09;返回影响行数3、查询 查询一个字段&#xff08;返回一…...

计算机毕业设计Python+Spark知识图谱高考志愿推荐系统 高考数据分析 高考可视化 高考大数据 大数据毕业设计 机器学习 深度学习 人工智能

学院&#xff08;全称&#xff09;&#xff1a; 专业&#xff08;全称&#xff09;&#xff1a; 姓名 学号 年级 班级 设计&#xff08;论文&#xff09; 题目 基于Spark的高考志愿推荐系统设计与实现 指导教师姓名 职称 拟…...

基于java+springboot+vue实现的电商个性化推荐系统(文末源码+Lw+ppt)23-389

摘 要 伴随着我国社会的发展&#xff0c;人民生活质量日益提高。于是对电商个性化推荐进行规范而严格是十分有必要的&#xff0c;所以许许多多的信息管理系统应运而生。此时单靠人力应对这些事务就显得有些力不从心了。所以本论文将设计一套电商个性化推荐系统&#xff0c;帮…...

论文阅读,The Lattice Boltzmann Method: Principles and Practice(六)(1)

目录 一、流体模拟方法概述 二、传统的Navier-Stokes求解器 2.1 有限差分 2.2 有限体积法 2.3 有限元法 三、基于粒子的求解器 3.1 动力学理论 3.2 分子动力学 3.3 格子气体模型 3.4 耗散粒子动力学 3.5 多粒子碰撞动力学 3.6 直接模拟蒙特卡罗方法 3.7 平滑粒子流…...

新能源充电桩站场视频汇聚系统建设方案及技术特点分析

随着新能源汽车的普及&#xff0c;充电桩作为新能源汽车的基础设施&#xff0c;其安全性和可靠性越来越受到人们的关注。为了更好地保障充电桩的安全运行与站场管理&#xff0c;TSINGSEE青犀&触角云推出了一套新能源汽车充电桩视频汇聚管理与视频监控方案。 方案采用高清摄…...

三、音频隐写[Audacity、deepsound、dtmf2num、MMSSTV、虚拟声卡、MP3Stego]

工具 1.Audacity 下载&#xff1a;https://www.audacityteam.org/download/windows/ 使用&#xff1a; 删除&#xff1a;先用左键长按拖着选中内容&#xff0c;然后选择软件最上方菜单栏的编辑&#xff0c;然后选择“删除”&#xff0c;最后点击文件的导出音频就能成功导出…...

二、Web3 学习(区块链)

区块链基础知识 一、基础知识1. 区块链可以做什么&#xff1f;2. 区块链的三个特点 二、区块链的类型概括1. PoW2. PoS3. 私有链和联盟链 三、智能合约1. 什么是智能合约2. 如何使用智能合约 四、困境1. 三难选择的基本要素2. 这真的是一个三难选择吗? 五、比特币1. 什么是比特…...

Linux内网提权

一、SUID提权 前提条件&#xff1a; &#xff08;1&#xff09;SUID仅对二进制有效&#xff08;2&#xff09;执行者对于该程序需要有x的可执行权限&#xff08;3&#xff09;本权限仅在程序的执行过程中有效 1、设置SUID权限&#xff1a;&#xff08;root权限&#xff09; …...

聚观早报 | 抖音独立商城App上线;阿里云联发科合作

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 3月29日消息 抖音独立商城App上线 阿里云联发科合作 苹果WWDC24官宣 恒大汽车2023年营收财报 亚马逊投资Anthro…...

第十四届蓝桥杯省赛C++ B组所有题目以及题解(C++)【编程题均通过100%测试数据】

第一题《日期统计》【枚举】 【问题描述】 小蓝现在有一个长度为100的数组&#xff0c;数组中的每个元素的值都在0到9的范围之内。数组中的元素从左至右如下所示&#xff1a; 5 6 8 6 9 1 6 1 2 4 9 1 9 8 2 3 6 4 7 7 5 9 5 0 3 8 7 5 8 1 5 8 6 1 8 3 0 3 7 9 2 7 0 5 8 8 …...

【御控物联】 IOT异构数据JSON转化(场景案例一)

文章目录 前言技术资料 前言 随着物联网、大数据、智能制造技术的不断发展&#xff0c;越来越多的企业正在进行工厂的智能化转型升级。转型升级第一步往往是设备的智能化改造&#xff0c;助力设备数据快速上云&#xff0c;实现设备数据共享和场景互联。然而&#xff0c;在生产…...

Kubernetes-running app on kube

Docker 安装Docker 首先&#xff0c;您需要在Linux机器上安装Docker。如果您不使用Linux&#xff0c;则需要启动一个Linux虚拟机(VM)并在该虚拟机中运行Docker。如果你使用的是Mac或Windows系统&#xff0c;并按照指令安装Docker, Docker将为你建立一个虚拟机&#xff0c;并在…...

简述如何系统地学习Python

随着人工智能、大数据和云计算等技术的快速发展&#xff0c;编程已经成为了当今社会中不可或缺的一项技能。Python作为一种高级编程语言&#xff0c;因其简洁明了的语法、强大的功能和广泛的应用领域&#xff0c;成为了许多初学者和专业人士的首选。那么&#xff0c;如何系统地…...

bsd猜想 Murmuration of Eliptic Curves(笔记)

BSD Alexey Pozdnyakov (University of Connecticut) YUTUBE视频&#xff0c; B站搬运地址新生代女数学家Nina Zubrilina得到椭圆曲线椋鸟群飞模式精确公式与证明 Arithmetic Geometry算术几何 希尔伯特第十问题 希尔伯特第十问题&#xff08;Hilbert’s Tenth Problem&#…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

从零开始了解数据采集(二十八)——制造业数字孪生

近年来&#xff0c;我国的工业领域正经历一场前所未有的数字化变革&#xff0c;从“双碳目标”到工业互联网平台的推广&#xff0c;国家政策和市场需求共同推动了制造业的升级。在这场变革中&#xff0c;数字孪生技术成为备受关注的关键工具&#xff0c;它不仅让企业“看见”设…...

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...