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

vue+elementUI实现指定列的单元格可编辑

template中的代码如下:

<div v-if="(item.label === '高压侧' || item.label === '低压侧')&&coloumnHeader.label === '单柱片数'"><div class="editableCell"><div v-if="item.label === '高压侧'" @dblclick="changeValue(scope.$index, scope.row,'high')"><span v-if="!scope.row.highEdit">{{scope.row[item.prop]}}</span><el-input v-model="scope.row[item.prop]" v-else="scope.row.highEdit" size="mini" @blur.native.capture="valueBlur(scope.$index, scope.row, 'high')" v-focus></el-input></div><div v-else @dblclick="changeValue(scope.$index, scope.row,'low')"><span v-if="!scope.row.lowEdit">{{scope.row[item.prop]}}</span><el-input v-model="scope.row[item.prop]" v-else="scope.row.lowEdit" size="mini" @blur.native.capture="valueBlur(scope.$index, scope.row, 'low')"v-focus></el-input></div>			</div></div>

js代码如下:

		/*** 高压侧低压侧列双击可输入值* @param {Number} index 行索引* @param {Object} rowData 行数据* @param {String} type 高低压侧类型*/changeValue(index,rowData, type){if(type === 'high'){// 数据更新,视图更新if(Object.keys(this.updateTableData[index]).indexOf("highEdit") === -1){// 还没编辑过的添加编辑属性this.$set(this.updateTableData, index,{highEdit:true,...this.updateTableData[index]});}else{// 已经编辑过的,更改编辑属性this.$set(this.updateTableData[index], "highEdit", true);}				}else if(type === 'low'){if(Object.keys(this.updateTableData[index]).indexOf("lowEdit") === -1){this.$set(this.updateTableData, index,{lowEdit:true,...this.updateTableData[index]});}else{this.$set(this.updateTableData[index], "lowEdit", true);}}},/*** 输入框失去焦点时触发* @param {Number} index 行索引* @param {Object} rowData 行数据* @param {String} type 高低压侧类型*/valueBlur(index,rowData, type){// 数据更新,视图更新if(type === "high"){this.$set(this.updateTableData[index], "highEdit", false);}else{this.$set(this.updateTableData[index], "lowEdit", false);}console.log(this.updateTableData)},

相关文章:

vue+elementUI实现指定列的单元格可编辑

template中的代码如下&#xff1a; <div v-if"(item.label 高压侧 || item.label 低压侧)&&coloumnHeader.label 单柱片数"><div class"editableCell"><div v-if"item.label 高压侧" dblclick"changeValue(sco…...

RK3568平台开发系列讲解(基础篇)内核是如何发送事件到用户空间

🚀返回专栏总目录 文章目录 一、相关接口函数二、udevadm 命令三、实验沉淀、分享、成长,让自己和他人都能有所收获!😄 一、相关接口函数 kobject_uevent 是 Linux 内核中的一个函数, 用于生成和发送 uevent 事件。 它是 udev 和其他设备管理工具与内核通信的一种方式。…...

力扣---打家劫舍---动态规划

思路 1&#xff1a; 我将res[i]定义为&#xff1a;一定要取第 i 个房子的前提下&#xff0c;能获取的最大金额。那么直接用cnt从头记录到尾&#xff0c;每个房子的res最大值即是答案。那么递推公式是什么&#xff1f;res[i]max(res[i-2],res[i-1],...,res[0])nums[i]。数组初始…...

mac安装rust环境

mac安装rust环境 老规矩官方文档 1. mac官网使用的是脚本安装, 至于为啥没使用brew也没推荐俺也不太清楚 curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh2. 一般来说中途会遇见有一个选择我这里选择直接回车默认安装(如果以后我研究明白的话会进行更新, 现在是…...

1058:求一元二次方程

【题目描述】 利用公式 求一元二次方程axbxc0的根&#xff0c;其中a不等于0。结果要求精确到小数点后5位。 【输入】 输入一行&#xff0c;包含三个浮点数a,b,c&#xff08;它们之间以一个空格分开&#xff09;&#xff0c;分别表示方程axbxc0的系数。 【输出】 输出一行&…...

GraphQL入门之一对多关联查询

创建 Node.js 的工程 mkdir myapp cd myapp npm init (一路回车)安装依赖包 npm install apollo/server graphql定义 Schema 创建 schema.graphql 文件&#xff0c;内容如下&#xff1a; type Book {title: String!author: Author! }type Author {name: String!books: [Boo…...

MATLAB和Python数值和符号计算可视化物理学气体动能和粒子速度

要点 Python物理学差分数值和符号计算 热动力学计算&#xff1a;统计力学&#xff0c;分子动力学模型 Python寻找弹性物体的运动&#xff0c;LAMMPS 分子动力学模拟器模拟2D气体分子&#xff0c;Python原子模拟绘图&#xff0c;Python数值计算原子平衡性&#xff0c;Python绘制…...

阿里云-零基础入门NLP【基于机器学习的文本分类】

文章目录 学习过程赛题理解学习目标赛题数据数据标签评测指标解题思路TF-IDF介绍TF-IDF 机器学习分类器TF-IDF LinearSVCTF-IDF LGBMClassifier 学习过程 20年当时自身功底是比较零基础(会写些基础的Python[三个科学计算包]数据分析)&#xff0c;一开始看这块其实挺懵的&am…...

蓝桥杯模块综合——高质量讲解AT24C02,BS18B20,BS1302,AD/DA(PCF8591),超声波模块

AT24C02——就是一个存储的东西&#xff0c;可以给他写东西&#xff0c;掉电不丢失。 void EEPROM_Write(unsigned char * EEPROM_String,unsigned char addr , unsigned char num) {IIC_Start();IIC_SendByte(0xA0);IIC_WaitAck();IIC_SendByte(addr);IIC_WaitAck();while(nu…...

前端跨平台开发框架:简化多端开发的利器

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

cesium.js加载模型后,重新设置旋转角度属性值

// 加载模型var position Cesium.Cartesian3.fromDegrees(longitude, latitude, height);// 计算矩阵var rollAngleDegrees 15; // 设置翻滚角度var rollAngleRadians Cesium.Math.toRadians(rollAngleDegrees); // 将角度转换为弧度var orientation Cesium.Transforms.eas…...

②免费AI软件开发工具测评:通义灵码 VS 码上飞

前言 我又双叒叕来测评了&#xff01;上次给大家带来的是iFlyCode和CodeFlying两款产品的测评&#xff0c;受到了大家的一致好评~ 今天咱就继续来聊聊&#xff0c;这次我们选的的对象是通义灵码和码上飞&#xff0c;从名字上也能看到出来这两款产品一定是跟软件开发有关系的&…...

幻兽帕鲁游戏搭建(docker)

系列文章目录 第一章&#xff1a; 幻兽帕陆游戏搭建 文章目录 系列文章目录前言一、镜像安装1.创建游戏目录2.拉取镜像3.下载配置文件4.启动游戏 二、自定义配置总结 前言 这段时间一直在写论文还有找工作&#xff0c;也没学啥新技术&#xff0c;所以博客也很长时间没写了&am…...

unity报错出现Asset database transaction committed twice!

错误描述&#xff1a; 运行时报错 Assertion failed on expression: ‘m_ErrorCode MDB_MAP_RESIZED || !HasAbortingErrors()’Asset database transaction committed twice!Assertion failed on expression: ‘errors MDB_SUCCESS || errors MDB_NOTFOUND’ 解决办法&…...

去除项目git的控制 端口号的关闭

以下操作都是在windows下。只是记录一下。 find . -name “.git” | xargs rm -rf 查看所有分支 git branch -a 查看当前分支 git branch -a 切换分支 git chenkout develop docker 查看容器的ip docker inspect -f ‘{{.Name}} - {{range .NetworkSettings.Networks}}{{.IP…...

交叉注意力融合时域、频域特征的FFT + CNN -BiLSTM-CrossAttention电能质量扰动识别模型

往期精彩内容&#xff1a; 电能质量扰动信号数据介绍与分类-Python实现-CSDN博客 Python电能质量扰动信号分类(一)基于LSTM模型的一维信号分类-CSDN博客 Python电能质量扰动信号分类(二)基于CNN模型的一维信号分类-CSDN博客 Python电能质量扰动信号分类(三)基于Transformer…...

简单的Charles抓包教程

安装Charles 安装地址&#xff1a;https://www.charlesproxy.com/download/ 开关本机抓包 一般我们在抓取手机端内容时需要将Proxy菜单栏下的Windows Proxy取消勾选&#xff0c;禁止charles抓取本机上的请求信息。 注&#xff1a;开启电脑端抓包后&#xff0c;会为电脑添加局…...

如何构建Docker自定义镜像

说明&#xff1a;平常我们使用Docker运行各种容器&#xff0c;极大地方便了我们对开发应用的使用&#xff0c;如MySQL、Redis&#xff0c;以及各种中间件&#xff0c;使用时只要拉镜像&#xff0c;运行容器即可。本文介绍如何创建一个Demo&#xff0c;自定义构建一个镜像。 开…...

一起学数据分析_2

写在前面&#xff1a;代码运行环境为jupyter&#xff0c;如果结果显示不出来的地方就加一个print()函数。 一、数据基本处理 缺失值处理&#xff1a; import numpy as np import pandas as pd#加载数据train.csv df pd.read_csv(train_chinese.csv) df.head()# 查看数据基本…...

请解释Redis是什么?它有哪些主要应用场景?Redis支持哪些数据类型?并描述每种数据类型的特性和使用场景。

请解释Redis是什么&#xff1f;它有哪些主要应用场景&#xff1f; Redis是一款内存高速缓存NoSQL数据库&#xff0c;使用C语言编写&#xff0c;它支持丰富的数据类型&#xff0c;如String、list、set、zset、hash等&#xff0c;并且这些数据类型都直接支持数据的原子性操作&…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...