双击编辑el-table的单元格数据

news/2024/11/29 23:27:21/

(1) el-table刷新要求绑定el-table的key要发生变化才会刷新

(2) 单元格双击事件 cell-dblclick

(3) 往row里面添加一个属性来唯一标识某一行的数据,双击时使这特殊属性为true,输入框失去焦点时则设置特殊属性为false,并且输入框的显示与隐藏通过v-if与特殊属性绑定。

(4) 回车事件 @keyup.enter.native

<el-table border class="mt20" :data="data" style="width: 100%" row-key="id" :key="key" @cell-dblclick="dblclick"><el-table-column type="index" label="序号" width="50"><template slot-scope="scope"><span>{{ (search.page -1) * search.size + scope.$index+1 }}</span></template></el-table-column><el-table-column prop="id" label="ID" width="width"></el-table-column><el-table-column prop="name" label="名称" width="width"></el-table-column><el-table-column prop="lwkx" label="论文扩写" width="width"><template scope="scope"><div v-if="scope.row[scope.column.property+'Show']" class="input-box"><el-input size="small" @keyup.enter.native="handleInputlwkx(scope.row,scope.column)" v-model="scope.row.lwkx"></el-input></div><span v-else>{{scope.row.lwkx}}</span></template></el-table-column></el-table><script>
export default {
data() {return {key: "",dialogVisible: false,search: {page: 1,size: 20,},data: [],total: 0,};},
methods: {dblclick: function (row, column) {console.log(column.property);row[column.property + "Show"] = false;row[column.property + "Show"] = true;this.updateTable();},// 修改论文扩写handleInputlwkx(row, column) {row[column.property + "Show"] = true;//业务代码funcGroupUpdate(row).then((res) => {this.dialogVisible = false;this.$message.success(res.message);});},//更新表格updateTable() {this.key = Math.random();},
}
}
</script>

双击编辑el-table的单元格_el-table 单元格-CSDN博客


http://www.ppmy.cn/news/1285341.html

相关文章

鸿鹄电子招投标系统:基于Spring Boot、Mybatis、Redis和Layui的企业电子招采平台源码与立项流程

在数字化时代&#xff0c;企业需要借助先进的数字化技术来提高工程管理效率和质量。招投标管理系统作为企业内部业务项目管理的重要应用平台&#xff0c;涵盖了门户管理、立项管理、采购项目管理、采购公告管理、考核管理、报表管理、评审管理、企业管理、采购管理和系统管理等…

数据库开发之子查询案例的详细解析

1.5 案例 基于之前设计的多表案例的表结构&#xff0c;我们来完成今天的多表查询案例需求。 准备环境 将资料中准备好的多表查询的数据准备的SQL脚本导入数据库中。 分类表&#xff1a;category 菜品表&#xff1a;dish 套餐表&#xff1a;setmeal 套餐菜品关系表&#x…

Spring Boot整合GraphQL

RPC选型入门测试系列文章 GraphQL是一种用于API开发的查询语言和运行时环境。它由Facebook开发并于2015年开源。GraphQL的主要目标是提供一种更高效、灵活和易于使用的方式来获取和操作数据。与传统的RESTful API相比&#xff0c;GraphQL允许客户端精确地指定需要的数据&#…

【ESP-NOW 入门(ESP32 with Arduino IDE)】

ESP-NOW 入门(ESP32 with Arduino IDE) 1. 前言2. Arduino集成开发环境3. ESP-NOW 简介3.1 ESP-NOW 支持以下功能:3.2 ESP-NOW 技术还存在以下局限性:4. ESP-NOW 单向通信4.1 一个 ESP32 开发板向另一个 ESP32 开发板发送数据4.2 一个“主”ESP32 向多个 ESP32“slave”发送…

svn外网打不开url地址怎么解决

在家或者出差在外经常会有连接到公司内部SVN服务器的需求&#xff0c; 但是 svn外网打不开url地址怎么解决&#xff1f;如何才能连接到公司内部SVN服务器&#xff1f;今天小编教你一招&#xff0c;在本地SVN服务的内网IP端口用快解析软件添加映射&#xff0c;一步就可以提供让公…

边缘计算网关:重新定义物联网数据处理

随着物联网&#xff08;IoT&#xff09;设备的爆炸式增长&#xff0c;数据处理和分析的需求也在迅速增加。传统的数据处理方式&#xff0c;将所有数据传输到中心服务器进行处理&#xff0c;不仅增加了网络负担&#xff0c;还可能导致数据延迟和安全问题。因此&#xff0c;边缘计…

RabbitMQ消息存储JSON格式反序列化

如果发送消息消息体为实体类对象数据&#xff0c;交换机接收消息经由路由键发送给队列。需要实现数据反序列化操作。实现JSON格式的反序列化操作 Rabbitmq的反序列化接口 MessageConverter&#xff0c;它的实现类有 Jackson2JsonMessageConverter的反序列化实现类&#xff0c…

三路电源互备自投电路

当供电源停电时&#xff0c;主备用电源自动投入运行&#xff0c;当主备用电源断电时&#xff0c;则次备用电源自动投入运行&#xff0c;从而大大提高供电的可靠性。