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

Vue3与Element-plus配合 直接修改表格中的一项数据——控制输入框的显示与隐藏

 利用控制与隐藏输入框,直接修改表格中的每一项数据。

<!-- 表格模块 -->
<div><el-table :data="tablelist" style="width: 100%"><el-table-column align="center" prop="deposit" label="接单押金"><template #default="{ row, $index }"><span v-if="!showEdit[$index]">{{ row.deposit }}</span><div v-else style="margin-left: 200px; width: 100px"><el-input v-model="row.deposit" placeholder="请输入分类名"></el-input></div> </template></el-table-column><el-table-column align="center" label="操作"><template #default="{ row, $index }"><!-- 编辑 --><el-buttonv-if="!showEdit[$index]"type="primary"@click="Edit(row, $index)"plain>编辑</el-button><!-- 编辑确认 --><el-button v-else type="primary" @click="sure(row, $index)" plain>确认</el-button></template></el-table-column></el-table>
</div>
// #region *****************点击编辑控制输入框显示与关闭模块****************
const showEdit = ref<boolean[]>([])
// 编辑处理
const Edit = (row: any, index: any) => {//vue3使用数组添加数据showEdit.value[index] = true
}
// #endregion
// #region *****************确认编辑模块****************
const sure = async (row: any, index: any) => {console.log(row)showEdit.value[index] = false// 表单预校验// await form.value.validate()// 发起修改请求// await updatePageClassServe(row).then(() => {//     ElMessage.success('修改成功!')//     showEdit.value = []// })// 重新获取分类数据,渲染页面// getChannelList()
}
// #endregion

 

相关文章:

Vue3与Element-plus配合 直接修改表格中的一项数据——控制输入框的显示与隐藏

利用控制与隐藏输入框,直接修改表格中的每一项数据。 <!-- 表格模块 --> <div><el-table :data"tablelist" style"width: 100%"><el-table-column align"center" prop"deposit" label"接单押金">&l…...

设计模式--创建型

实现 #include <iostream> #include <memory>// 抽象产品类 class Product {public:virtual ~Product() {}virtual void Operation() const 0; };// 具体产品 类A class ConcreteProductA : public Product {public:virtual void Operation() const override {st…...

Vue3时间选择器datetimerange在数据库存开始时间和结束时间

♥️作者&#xff1a;小宋1021 &#x1f935;‍♂️个人主页&#xff1a;小宋1021主页 ♥️坚持分析平时学习到的项目以及学习到的软件开发知识&#xff0c;和大家一起努力呀&#xff01;&#xff01;&#xff01; &#x1f388;&#x1f388;加油&#xff01; 加油&#xff01…...

鼠标移入事件 mouseover

<template><div><div mouseover"handleMouseOver">区域1</div></div> </template><script> export default {methods: {handleMouseOver() {console.log(鼠标悬停在区域1);}} } </script>...

UE4 自动换行——按排序关键字1.2.3.

要自动换行的字符串举例&#xff1a;“有效节点为:1.demo-worker-02 2.demo-worker-01 3.demo-master-01” 1.获取相邻两位字符串&#xff0c;组合后与关键字比较 2.当两位字符串与关键字相等&#xff0c;附加一次换行 3.其他例如 1)2)3)、(1)(2)(3)、<1><2><…...

Object.entries()解析出来的数组顺序乱了,健是string类型

现象: 从后端哪里拿到了一长串数据 const obj {"2023-07-01":10,"2023-09-18":2,"2023-10-10":3,"2024-01-10":1,"2024-01-12":1,"2024-02-20":4,"2024-07-01":4,... }; 比如上面的数据有一年的 并…...

SSM(Spring + Spring MVC + MyBatis)框架面试三道题

以下是三道关于SSM&#xff08;Spring Spring MVC MyBatis&#xff09;框架的面试题&#xff0c;由简单到困难进行排列&#xff1a; 1. 简答题&#xff1a;请简述Spring框架的核心特性。 答案&#xff1a; Spring框架的核心特性主要包括以下几个方面&#xff1a; 控制反转…...

ctfshow-web入门-php特性(web132-web136)

目录 1、web132 2、web133 3、web134 4、web135 5、web136 1、web132 存在 robots.txt 访问 /admin 需要传三个参数&#xff0c;并且需要满足&#xff1a; if($code mt_rand(1,0x36D) && $password $flag || $username "admin"){if($code admin){ech…...

通信原理-实验六:实验测验

实验六 实验测验 一&#xff1a;测验内容和要求 测试需要完成以下几个步骤&#xff1a; 配置好以下网络图&#xff1b;占总分10%&#xff08;缺少一个扣一分&#xff09;根据下面图配置好对应的IP和网关以及路由等相关配置&#xff0c;保证设备之间连通正常&#xff1b;占总…...

意得辑润色新用户注册直减15%

ABSJU202 优惠了很多...

重拾CSS,前端样式精读-函数(颜色,计算,图像和图形)

前言 本文收录于CSS系列文章中&#xff0c;欢迎阅读指正 在计算机编程中&#xff0c;函数有着重要的作用和意义&#xff0c;它可以实现封装&#xff0c;复用&#xff0c;模块化&#xff0c;参数等功能效果&#xff0c;在如何在CSS中写变量&#xff1f;一文带你了解前端样式利…...

经纬恒润与奇瑞汽车签订新能源项目重点供应商合作协议,共同开启合作新篇章

近日&#xff0c;2024年国家级芜湖经开区汽车零部件生态大会成功举行&#xff0c;经纬恒润受邀出席&#xff0c;与行业各伙伴齐聚经开区&#xff0c;同绘发展蓝图&#xff0c;助力经开区汽车产业高质量发展。会上&#xff0c;经纬恒润与奇瑞汽车签署合作协议&#xff0c;成为奇…...

@RestController和@Controller

RestController和Controller 在 Spring MVC 中&#xff0c;RestController 和 Controller 是用于定义控制器的注解&#xff0c;但它们有一些重要的区别。下面是对它们的详细解释和示例&#xff1a; Controller Controller 注解用于标记一个类是一个 Spring MVC 控制器&#…...

STM32-寄存器DMA配置指南

配置步骤 在STM32F0xx中文参考手册中的DMA部分在开头给出了配置步骤 每个通道都可以在外设寄存器固定地址和存储器地址之间执行 DMA 传输。DMA 传输的数据 量是可编程的&#xff0c;最大达到 65535。每次传输之后相应的计数寄存器都做一次递减操作&#xff0c;直到 计数为&am…...

【Django】anaconda环境变量配置及配置python虚拟环境

文章目录 配置环境变量配置python虚拟环境查看conda源并配置国内源在虚拟环境中安装django 配置环境变量 control sysdm.cpl,,3笔者anaconda安装目录为C:\ProgramData\anaconda3 那么需要加入path中的有如下三个 C:\ProgramData\anaconda3 C:\ProgramData\anaconda3\Scripts C:…...

保障企业数据主权:安全可控的爬虫工具与管理平台

摘要 在数据驱动的时代&#xff0c;企业对数据的需求日益增长&#xff0c;但如何在保障数据主权的前提下高效采集数据&#xff1f;本文深入探讨了选择安全可控爬虫工具与管理平台的重要性&#xff0c;分析了关键特性&#xff0c;并提出实用建议&#xff0c;助力企业维护数据安…...

NC重建二叉树

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 描述 给定节点数为…...

2025第十九届中国欧亚国际军民两用技术及西安国防电子航空航天暨无人机展

2025第十九届中国欧亚国际军民两用技术及西安国防电子航空航天暨无人机展 时间&#xff1a;2025年3月14-16日 地点&#xff1a;西安国际会展中心 详询主办方陆先生 I38&#xff08;前三位&#xff09; I82I&#xff08;中间四位&#xff09; 9I72&#xff08;后面四位&am…...

电子邮件协议详解

电子邮件作为互联网通信的重要组成部分&#xff0c;已经成为日常交流不可或缺的一部分。为了确保电子邮件的有效传输和管理&#xff0c;计算机网络使用了多种协议。本文将深入探讨电子邮件协议中的三大核心协议&#xff1a;SMTP、POP3 和 IMAP。我们将详细介绍这些协议的工作原…...

C++客户端Qt开发——Qt窗口(工具栏)

2.工具栏 使用QToolBar表示工具栏对象&#xff0c;一个窗口可以有多个工具栏&#xff0c;也可以没有&#xff0c;工具栏往往也可以手动移动位置 ①设置工具栏 #include "mainwindow.h" #include "ui_mainwindow.h" #include<QToolBar> #include<…...

JS知识点汇总(十九)--ajax

1. 说说ajax的原理&#xff0c;以及如何实现&#xff1f; AJAX 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML&#xff0c;是一种创建交互式网页应用的网页开发技术&#xff0c;可以在不重新加载整个网页的情况下&#xff0c;与服务器交换数据&#xff0c;并且更…...

OpenClaw多模态飞书助手:Qwen3-VL:30B实战指南

OpenClaw多模态飞书助手&#xff1a;Qwen3-VL:30B实战指南 1. 为什么我们需要多模态飞书助手&#xff1f; 去年夏天&#xff0c;我负责一个跨部门协作项目时&#xff0c;每天要处理上百条飞书消息和几十份文档。最头疼的是同事发来的截图——有时是数据图表&#xff0c;有时是…...

智能体间通信实践指南

每个雄心勃勃的 AI 项目都会遇到这样的时刻&#xff1a;你碰壁了。你有一个强大的语言模型&#xff0c;你让它做一些复杂的事情——也许从三十个不同角度研究一个主题,或者从头开始构建整个营销活动——但它就是……无法把所有东西整合在一起。上下文变得太大。任务太分散。输出…...

PP实战指南:ECN工程变更在物料计划中的关键应用与系统操作解析

1. ECN工程变更的核心价值与业务场景 第一次接触ECN&#xff08;Engineering Change Notice&#xff09;是在2015年负责汽车零部件项目时&#xff0c;当时产线因为一个螺丝规格变更导致全线停产8小时。这个惨痛教训让我深刻理解到&#xff0c;工程变更绝不是简单的技术文档更新…...

实战指南:基于快马ai生成物联网温湿度光照监测站stm32完整代码

最近在做一个物联网环境监测的小项目&#xff0c;需要用到STM32采集温湿度、光照数据并通过串口上报&#xff0c;同时还要在OLED屏上实时显示。作为一个经常和硬件打交道的开发者&#xff0c;我发现用InsCode(快马)平台可以快速生成符合需求的完整代码框架&#xff0c;省去了大…...

打破数据标注瓶颈:Label Studio如何让AI训练效率提升300%?

打破数据标注瓶颈&#xff1a;Label Studio如何让AI训练效率提升300%&#xff1f; 【免费下载链接】label-studio Label Studio is a multi-type data labeling and annotation tool with standardized output format 项目地址: https://gitcode.com/GitHub_Trending/la/labe…...

计算机毕设 java 基于 BS 的驾校在线学习考试系统 SpringBoot 驾校在线学习与考试管理平台 JavaWeb 驾校理论学习与模拟考试系统

计算机毕设 java 基于 BS 的驾校在线学习考试系统 43i2x9&#xff0c;末尾的数字和英文也要加上 &#xff08;配套有源码 程序 mysql 数据库 论文&#xff09;本套源码可以先看具体功能演示视频领取&#xff0c;文末有联 xi 可分享随着驾考需求的不断增长&#xff0c;传统驾校理…...

AD7124多通道配置实战:从寄存器映射到混合模式应用

1. AD7124多通道配置的核心价值 第一次接触AD7124时&#xff0c;我被它复杂的寄存器结构弄得晕头转向。这款24位Σ-Δ ADC芯片在工业测温、多路数据采集等场景表现优异&#xff0c;但想要充分发挥其性能&#xff0c;必须吃透通道与配置寄存器的映射关系。实际项目中&#xff0c…...

如何使用Postman,通过Mock的方式测试我们的API

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 这篇文章将教会大家如何利用 postman&#xff0c;通过 Mock 的方式测试我们的 API。什么是 MockMock 是一项特殊的测试技巧&#xff0c;可以在没有依赖项的情况下进…...

解锁网易云音乐解析工具:3个鲜为人知的实用技巧

解锁网易云音乐解析工具&#xff1a;3个鲜为人知的实用技巧 【免费下载链接】Netease_url 网易云无损解析 项目地址: https://gitcode.com/gh_mirrors/ne/Netease_url 网易云音乐解析工具作为一款专注于无损资源获取的开源项目&#xff0c;不仅能帮助用户轻松获取音乐文…...