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

(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.mzph.cn/news/585338.shtml

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

相关文章

SparkStreaming_window_sparksql_reids

1.5 window 滚动窗口滑动窗口 window操作就是窗口函数。Spark Streaming提供了滑动窗口操作的支持&#xff0c;从而让我们可以对一个滑动窗口内的数据执行计算操作。每次掉落在窗口内的RDD的数据&#xff0c;会被聚合起来执行计算操作&#xff0c;然后生成的RDD&#xff0c;会…

m3u8网络视频文件下载方法

在windows下&#xff0c;使用命令行cmd的命令下载m3u8视频文件并保存为mp4文件。 1.下载ffmpeg&#xff0c;访问FFmpeg官方网站&#xff1a;https://www.ffmpeg.org/进行下载 ffmpeg下载&#xff0c;安装&#xff0c;操作说明 https://blog.csdn.net/m0_53157282/article/det…

下载和安装AD14 - Altium Designer 14.3.20.54863

这个版本应该还支持XP 系统[doge]&#xff0c;总之就是想安装一下&#xff0c;没什么特别的意义。 下载 资源来自毛子网站&#xff1a;https://rutracker.net/forum/viewtopic.php?t5140739&#xff0c;带上个网页翻译插件就行。要用磁力链接下载&#xff0c;推荐用qbittorr…

RabbitMQ之快速入门、上手

前言 学习一样新技术、新框架&#xff0c;最重要的是学习其思想、原理。即原理性思维。 如果是因为工作原因&#xff0c;需要快速上手RabbitMQ&#xff0c;本篇或许适合你。 核心概念 Connection&#xff1a;publisher&#xff0f;consumer 和 broker 之间的 TCP 连接Channel…

Android 理解Context

文章目录 Android 理解ContextContext是什么Activity能直接new吗&#xff1f; Context结构和源码一个程序有几个ContextContext的作用Context作用域获取ContextgetApplication()和getApplicationContext()区别Context引起的内存泄露错误的单例模式View持有Activity应用正确使用…

Springboot2+mybatisplus+多数据源更换mysql数据库为pgsql

前提:Springboot2+mybatisplus+多数据源mysql,现在需要把数据源2更换为pgsql 一、pom文件修改 增加pgsql驱动 <postgresql.version>42.7.1</postgresql.version> <!-- https://mvnrepository.com/artifact/org.postgresql/postgresql --><dependency&…

八数码问题

八数码问题 在3x3的棋盘&#xff0c;摆有八个棋子&#xff0c;每个棋子上标有1至8的某一数字&#xff0c;不同棋子上标的数 字不相同。棋盘上还有一个空格&#xff0c;与空格相邻的棋子可以移到空格中。要求解决的问题 是:给出一个初始状态和一个目标状态&#xff0c;找出一一种…

centos 防火墙 设置 LTS

centos 防火墙 设置 LTS https://blog.csdn.net/m0_58805648/article/details/130671008

详解—数据结构—<常用排序>基本实现和代码分析

目录 一.排序的概念及其运用 1.1排序的概念 1.2排序运用​编辑 1.3 常见的排序算法​编辑 二.常见排序算法的实现 2.1 插入排序 2.1.1基本思想&#xff1a; 2.1.2直接插入排序&#xff1a; 2.1.3 希尔排序( 缩小增量排序 ) 2.2 选择排序 2.2.1基本思想&#xff1a; …

日志记录、跟踪和指标

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版&#xff0c;欢迎购买。点击进入详情 日志记录、跟踪和指标是系统可观察性的三大支柱。 下图显示了它们的定义和典型架构。 记录 日志记录系统中的离散事件。例如&#xff0c;我们可以将传入请求或对…

CentOS 8 上安装 Python 3.10.12

以下是在 CentOS 8 上安装 Python 3.10.12 的全流程&#xff0c;包括下载、编译和安装。请在执行这些步骤之前确保您具有足够的权限。 安装编译依赖项&#xff1a; sudo dnf install -y gcc openssl-devel bzip2-devel libffi-devel zlib-devel readline-devel sqlite-devel下载…

论文阅读——UniRepLKNet

UniRepLKNet: A Universal Perception Large-Kernel ConvNet for Audio, Video, Point Cloud, Time-Series and Image Recognition 当我们将一个33的conv添加到一个小卷积核ConvNet中时&#xff0c;我们预计它会同时产生三种效果——1&#xff09;使感受野更大&#xff0c;2&am…

Linux:多文件编辑

多文件编辑 1.使用vim编辑多个文件 编辑多个文件有两种形式&#xff0c;一种是在进入vim前使用的参数就是多个文件。另一种就是进入vim后再编辑其他的文件。 同时创建两个新文件并编辑 $ vim 1.txt 2.txt默认进入1.txt文件的编辑界面 命令行模式下输入:n编辑2.txt文件&…

从C到C++1

一.思想过渡 前言&#xff1a;明确地说&#xff0c;学了C语言就相当于学了 C 的一半&#xff0c;从C语言转向 C 时&#xff0c;不需要再从头开始&#xff0c;接着C语言往下学就可以&#xff0c;所以我强烈建议先学C语言再学 C。 1.面向过程与面向对象 ​ 从“学院派”的角度来…

Python之自然语言处理库snowNLP

一、介绍 SnowNLP是一个python写的类库&#xff0c;可以方便的处理中文文本内容&#xff0c;是受到了TextBlob的启发而写的&#xff0c;由于现在大部分的自然语言处理库基本都是针对英文的&#xff0c;于是写了一个方便处理中文的类库&#xff0c;并且和TextBlob不同的是&…

在ubuntu上挂载QNX 镜像

步骤 1&#xff0c;将QNX imge转换成android sparse镜像 这个QNX镜像可以是直接从QNX分区读取得到或者你的刷机包中的镜像&#xff1a; rootubuntu:~/workspace/$ file qnx_img.img qnx_img.img: DOS/MBR boot sector使用python tools/mksparse.py $镜像文件 转换为android …

elasticsearch 笔记三:查询建议介绍、Suggester、自动完成

一、查询建议介绍 1. 查询建议是什么&#xff1f; 查询建议&#xff0c;为用户提供良好的使用体验。主要包括&#xff1a; 拼写检查&#xff1b; 自动建议查询词&#xff08;自动补全&#xff09; 拼写检查如图&#xff1a; 自动建议查询词&#xff08;自动补全&#xff09;…

Rust之构建命令行程序(二):读取文件

开发环境 Windows 10Rust 1.74.1 VS Code 1.85.1 项目工程 这次创建了新的工程minigrep. 读取文件 现在&#xff0c;我们将添加读取file_path参数中指定的文件的功能。首先&#xff0c;我们需要一个样本文件来测试它:我们将使用一个包含少量文本的文件&#xff0c;多行包含一…

使用Python实现Linux惠尔顿上网认证客户端

在本文中&#xff0c;我们将展示如何使用Python编写一个简单的脚本来实现Linux下的惠尔顿上网认证。以下是我们需要的参数和值&#xff1a; wholeton_host: 惠尔顿服务器地址&#xff0c;例如 192.168.10.10wholeton_user: 用户名&#xff0c;例如 AABBCCwholeton_pass: 密码&…

【图像分类】【深度学习】【轻量级网络】【Pytorch版本】ShuffleNet_V2模型算法详解

【图像分类】【深度学习】【轻量级网络】【Pytorch版本】ShuffleNet_V2模型算法详解 文章目录 【图像分类】【深度学习】【轻量级网络】【Pytorch版本】ShuffleNet_V2模型算法详解前言ShuffleNet_V2讲解四条实用指导思想G1:相等的通道宽度可以降低存储访问成本G2:大量的分组卷积…