vue elmentui 可编辑table 实现

废话不多说上图:

1.可编辑input

2.可编辑下来框

3.点击chechbox

4.可编辑radio

其实后面两种可以直接显示值 需要修改直接改就行

保持风格统一所以就做了点击之后出现修改功能

上代码,不要哔哔 哈哈 粗暴   真得是曲不离口 拳不离手, 几天不练习都不会写了

声明:部分代码有借鉴

<template>
<div class="divCaculateResultDisplay"><div class="divParamInput2"><label class="labConfidenceParamTitle">结果:</label></div><div class="divNotAllowCaculateResult"><el-tableborderheight="385":data="tableData"class="tb-edit"style="width: 100%"@cell-click="getCell":cell-class-name="tableCellClassName"highlight-current-row><el-table-column fixed align="center" prop="createTime" label="创建时间" width="150"></el-table-column><el-table-column prop="powerFactor" label="功率因素" width="" align="center"><template slot-scope="scope"><el-input v-model="scope.row.powerFactor" @blur="handleBlur(scope.row)"  v-if=' scope.row.index == tabRowIndex  && scope.column.index == tabColumnIndex' v-focus></el-input><div v-else><span  >{{scope.row.powerFactor}}</span></div></template></el-table-column><el-table-column prop="selecttest" label="测试选择下拉" width="" align="center"  ><template slot-scope="scope"><el-select   v-focus v-model="scope.row.selecttest"   v-if=' scope.row.index == tabRowIndex  && scope.column.index == tabColumnIndex'  @change="handleBlur(scope.row)"    ><el-optionv-for="item in FloorsOptions":key="item":label="item":value="item"></el-option></el-select><div v-else><span   >{{scope.row.selecttest}}</span></div></template></el-table-column><el-table-column prop="checkboxtest" label="测试check" width="" align="center"  ><template slot-scope="scope"><el-checkbox v-model="scope.row.checkboxtest"  v-if=' scope.row.index == tabRowIndex  && scope.column.index == tabColumnIndex'  @change="handleBlur(scope.row)" label="复选框测试"></el-checkbox><div v-else><span   >{{scope.row.checkboxtest}}</span></div></template></el-table-column><el-table-column prop="radiotest" label="测试radio" width="" align="center"  ><template slot-scope="scope"><el-radio-group  v-if=' scope.row.index == tabRowIndex  && scope.column.index == tabColumnIndex' v-focus  @change="handleBlur(scope.row)" v-model="scope.row.radiotest" ><el-radio  label="男"  >男</el-radio><el-radio    label="女"  >女</el-radio></el-radio-group><div v-else><span   >{{scope.row.radiotest}}</span></div></template></el-table-column><!-- 此处省略 --><el-table-column label="操作"><template slot-scope="scope"><el-button @click="handleRowEdit(scope.$index, scope.row)">编辑</el-button><el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><el-pagination :current-page="page" :page-size="10" @current-change="CurrentChange" style="margin-top: 10px;display: flex;justify-content: center;align-items: center;" background layout="prev, pager, next" :total="total"></el-pagination></div></div>
</template>
<script>export default {directives: {//注册一个局部的自定义指令 v-focus,输入框自动聚焦focus: {inserted: function (el) {el.querySelector('input').focus()}}},
data() {return {page: 1,tabRowIndex: null, //行角标tabColumnIndex: '', //列角标limit: 10,total:0,FloorsOptions:["test1","test2","test3","test4","test5"],tableData: [{createTime:"2024-01-01",powerFactor:"555",selecttest:"test1",checkboxtest:"false",radiotest:"",setingFlag:false},{createTime:"2024-02-01",powerFactor:"66",selecttest:"test2",checkboxtest:"false",radiotest:"",setingFlag:false},{createTime:"2024-03-01",powerFactor:"66",selecttest:"test3",checkboxtest:"false",radiotest:"",setingFlag:false},{createTime:"2024-04-01",powerFactor:"66",selecttest:"test4",checkboxtest:"false",radiotest:"",setingFlag:false},],}},
methods: {getCell(row, column, cell, event) {console.log("行的内容:",row);this.tabRowIndex = row.indexthis.tabColumnIndex = column.index},tableCellClassName({row, column, rowIndex, columnIndex}){//注意这里是解构//利用单元格的 className 的回调方法,给行列索引赋值row.index=rowIndex;column.index=columnIndex;},handleBlur(row) {row.setingFlag = false;const param={id:row.id,powerFactor:row.powerFactor,currentA:row.currentA,currentB:row.currentB,currentC:row.currentC,voltage:row.voltage,voltageA:row.voltageA,voltageB:row.voltageB,voltageC:row.voltageC,activePower:row.activePower,selecttest:row.selecttest,reactivePower:row.reactivePower,apparentPower:row.apparentPower,calculatedPowerFactor:row.calculatedPowerFactor,energyConsumption:row.energyConsumption}this.tabRowIndex = null;this.tabColumnIndex = null;console.log("handleBlur========================");console.log(param);},handleRowEdit(index ,row){this.$set(row, "setingFlag", true)},handleDelete( index,  row){console.log(index  )console.log(  row)},CurrentChange(){console.log("CurrentChange")},}
}
</script>

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

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

相关文章

【力扣】45. 跳跃游戏 II

Problem: 45. 跳跃游戏 II 文章目录 问题思路复杂度Code 问题 思路 核心思路&#xff0c;例如nums[i]5&#xff0c;那么最远能跳五步&#xff1b; //那么在这接下来1-5范围内&#xff0c;哪个能让我跳的最远&#xff0c;这个最远指的是 -------------------------------------…

代码随想录图论

1. 所有可能的路径 class Solution:def allPathsSourceTarget(self, graph: List[List[int]]) -> List[List[int]]:def dfs(graph, result, path, root): #result 返回结果, path记录路径, root记录遍历到了第几个节点if root len(graph) - 1: #如果遍历到最后…

如何让多人同时扫码看图?图片转二维码的制作方法

现在经常会发现需要通过扫描二维码的方式来获取图片信息&#xff0c;这种方式可以让很多人能够同时获取图片信息&#xff0c;有利于提升传播的效率和用户体验。那么如何使用图片二维码生成器来在线制作二维码呢&#xff1f;其实步骤很简单&#xff0c;只需要在电脑3步就可以轻松…

Solana 上创建自己的 SLPToken:简明指南

Solana 定义 Solana 是由 Solana Labs 创建的区块链平台&#xff0c;旨在提供高吞吐量和低延迟的去中心化应用&#xff08;DApps&#xff09;开发环境。它采用一系列创新技术&#xff0c;如 PoH&#xff08;Proof of History&#xff09;共识机制和 Tower BFT&#xff08;BFT …

大模型预测结果导入到Doccano,人工修正预测不准的数据

背景 使用大语言模型做实体识别的实验时&#xff0c;发现大模型关于实体的边界预测一直不准。 主要原因在于当时找了很多同学标注数据&#xff0c;由于不同组同学关于实体的边界没有统一&#xff0c;故导致数据集中实体边界也没统一。 &#xff08;找太多人标&#xff0c;会有…

HalconLen2-示例程序分析

dev_update_window(off) dev_open_window(0, 0, 512, 512, black, WindowHandle) //打开窗口 stop() //程序中断 *dev_close_window() //关闭窗口 read_image (Bond, die/die_03) //读取图片 dev_display(Bond) //显示图片 set_display_font(WindowHandle, 16, mono, true, fal…

#陶晶驰串口屏使用

1.陶晶驰串口屏输入要连接的wifi信息实现 &#xff08;1&#xff09;选择文本控件 &#xff08;2&#xff09;给文本控件配置输入键盘&#xff0c;id代表用户名&#xff0c;password代表wifi密码&#xff08;注意wifi的频段需要为2.4GHz&#xff09; &#xff08;3&#xff0…

【结构型模式】适配器模式

一、适配器模式概述 适配器模式的定义-意图&#xff1a;将一个类的接口转换成客户希望的另一个接口。适配器模式让那些接口不兼容的类可以一起工作。(对象结构模式->对象适配器/类结构模式->类适配器) 适配器模式包含三个角色&#xff1a;目标(Target)角色、适配者(Adapt…

打破常规,重新定义PMP备考之路

今天我想和大家聊聊一个我们都不陌生的话题——PMP备考。你是不是也在备考的苦海中挣扎&#xff0c;或是听说过各种“速成”的神话&#xff1f;&#x1f914; 最近读到一篇文章&#xff08;来着圣略PMP培训讲师老杨&#xff09;&#xff0c;让我对PMP备考有了新的认识。原来&a…

常见的地图绘制方法,这个包全包了~~

在上一篇介绍完Bokeh精美可视化作品之后&#xff0c;有小伙伴咨询我能不能稍系统的介绍下如何在地图上添加如柱形图等其他元素的付方法&#xff1f; 这就让我想到一个优秀的地图绘制可视化包-R-cartography&#xff0c;虽然之前也有简单介绍过&#xff0c;本期就具体分享下该包…

Python QP 求解器

系列文章目录 前言 该 Python 库提供一站式 solve_qp 函数&#xff0c;用于求解凸二次规划&#xff1a; 向量不等式逐个坐标应用。函数返回后端 QP 求解器找到的初等解 &#xff0c;如果求解失败/问题不可行&#xff0c;则返回 None。所有求解器都要求问题是凸的&#xff0c;这…

隐式/动态游标的创建与使用

目录 将 emp 数据表中部门 10 的员工工资增加 100 元&#xff0c;然后使用隐式游标的 %ROWCOUNT 属性输出涉及的员工数量 动态游标的定义 声明游标变量 打开游标变量 检索游标变量 关闭游标变量 定义动态游标&#xff0c;输出 emp 中部门 10 的所有员工的工号和姓名 Orac…

【Vue3】getters---Vue3中的计算属性工具

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

多模态之ALBEF—先对齐后融合,利用动量蒸馏学习视觉语言模型表征,学习细节理解与论文详细阅读:Align before Fuse

Align before Fuse: Vision and Language Representation Learning with Momentum Distillation &#xff08;ALBEF&#xff09;在融合之前对齐&#xff1a;利用动量蒸馏进行视觉与语言表示学习 Paper: arxiv.org/pdf/2107.07651.pdf Github: https://github.com/salesforce/…

napi系列学习基础篇——如何通过DevEco Studio开发一个NAPI工程

简介 NAPI&#xff08;Native API&#xff09;是OpenHarmony系统中的一套原生模块扩展开发框架&#xff0c;它基于Node.js N-API规范开发&#xff0c;为开发者提供了JavaScript与C/C模块之间相互调用的交互能力。如下图所示&#xff1a; 这套机制对于鸿蒙系统开发的价值有两方…

权威认证!亚信安全9款产品入选CCIA首版《网络安全专用产品指南》

权威认证 近日&#xff0c;中国网络安全产业联盟&#xff08;CCIA&#xff09;正式发布《网络安全专用产品指南》&#xff08;第一版&#xff09;&#xff08;以下简称《指南》&#xff09;&#xff0c;亚信安全凭借突出技术实力、创新优势以及业内深厚积累&#xff0c;旗下9款…

学会 Python 后可以做什么副业?

近年来&#xff0c;Python凭借其简洁易入门的特点受到越来越多人群的青睐。 当然这不仅仅是针对程序员来说&#xff0c;对于一些学生、职场人士也是如此。 Python为什么会大受欢迎呢&#xff1f;因为Python还被大家称为“胶水语言&#xff0c;它适用于网站、桌面应用开发、[自…

大模型微调的几种常见方法

在文章深入理解大语言模型微调技术中&#xff0c;我们详细了解大语言模型微调的概念和训练过程&#xff0c;本篇给大家介绍大模型微调常见的7种训练方法。 1、Adapter Tuning 2019年谷歌的研究人员首次在论文《Parameter-Efficient Transfer Learning for NLP》提出针对 BERT 的…

Matlab求矩阵的逆,3种常用方法总结

几种求逆矩阵的方法总结&#xff0c;以Matlab语言为例 *0* 引言*1* 简单描述函数实现*2* 方法调用计算对比 0 引言 最近在使用函数库求解逆矩阵的时候发现同一个矩阵使用不同的语言、不同的求解方法会产生不同精度的结果&#xff0c;特别是阶数很高的方阵&#xff0c;一些库中的…

第14章 大数据与数据科学知识点梳理

第14章 大数据与数据科学知识点梳理&#xff08;附带页码&#xff09; ◼ 原则&#xff1a;组织应仔细管理与大数据源相关的元数据&#xff0c;以便对数据文件及其来源和价值进行准确的清单管理。P386 ◼ 大数据&#xff1a;数据量大&#xff08;Volume&#xff09;、数据更新…