vue el-table字段点击出现el-input输入框,失焦保存

一、效果展示

  • 当没有数据初始化展示如下:

  • 有数据展示数据,点击出现输入框, 失焦保存修改

二、代码实现

<!-- @cell-click="cellClick" 当前单击的单元格 -->
<el-tableref="table"size="mini"height="100%":data="tableData"@cell-click="cellClick"><el-table-column width="100" label="排序" show-overflow-tooltip><template slot-scope="scope"><spanv-if="scope.row.index === dbClickIndex &&dbClickLabel === '排序'"><el-inputref="sortNumRef"v-model="sortNum"placeholder="请输入"@blur="inputBlur(scope.row)":pattern="numberPattern"/></span><div v-else><div class="flex_between cursor_pointer"><span:style="{ color: !scope.row.sortNum ? '#bbb' : '' }">{{ scope.row.sortNum || '请输入' }}</span><i class="el-icon-edit" style="color: #1989fe"></i></div></div> </template></el-table-column>
</el-table>data() {return {sortNum: null,dbClickIndex: null, // 点击的单元格dbClickLabel: '', // 当前点击的列名numberPattern: '[1-9]\\d*', // 正则表达式,限制只能输入正整数}}methods:{//  row 当前行 column 当前列cellClick(row, column, cell, event) {if (column.label === '排序') {this.dbClickIndex = row.indexthis.dbClickLabel = column.labelthis.sortNum = row.sortNum//聚焦inputthis.$nextTick(() => {this.$refs.sortNumRef.focus()})}},// 失去焦点初始化inputBlur(row, event, column) {this.editThemeIndex(row)this.dbClickIndex = nullthis.dbClickLabel = ''this.sortNum = null},// 编辑主题指标列表-排序字段editThemeIndex(row) {if (this.sortNum === row.sortNum) returnconst params = {sortNum: Number(this.sortNum) || '',id: row.id}//接口请求xxxApi(params).then((res) => {if (res.code === 200) {this.$message.success('修改成功')this.refreshClick()}})},// 刷新refreshClick(val) {this.pages.pageIndex = 1this.initTable()}}

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

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

相关文章

为什么阿里推荐 LongAdder ,不推荐 AtomicLong ??

1.什么是LongAdder LongAdder是JDK1.8由Doug Lea大神新增的原子操作类&#xff0c;位于java.util.concurrent.atomic包下&#xff0c;LongAdder在高并发的场景下会比AtomicLong 具有更好的性能&#xff0c;代价是消耗更多的内存空间。

python+Django 使用apscheduler实现定时任务 管理调度

apscheduler实现定时任务 管理调度 在Django 项目中经常会用到定时任务去处理一些业务处理 使用 APScheduler 可以轻松地实现定时任务的管理和调度。你可以通过以下步骤来创建、启动、停止和删除定时任务&#xff1a; 1.创建调度器对象&#xff1a; from apscheduler.schedu…

笔记57:双向循环神经网络

本地笔记地址&#xff1a;D:\work_file\DeepLearning_Learning\03_个人笔记\3.循环神经网络\第9章&#xff1a;动手学深度学习~现代循环神经网络 a a a a a a a a a a a a

sql server外键设置

SQL Server外键设置 简介 在关系型数据库中&#xff0c;外键是一种约束&#xff0c;用于确保数据的完整性和一致性。外键约束定义了一个表中的列与另一个表中的列之间的关系&#xff0c;它可以用来保证数据的一致性、防止数据的破坏和数据冗余。在SQL Server中&#xff0c;我们…

mysql面试题——存储引擎相关

一&#xff1a;MySQL 支持哪些存储引擎? MySQL支持多种存储引擎&#xff0c;比如InnoDB&#xff0c;MyISAM&#xff0c; MySQL大于等于5.5之后&#xff0c;默认存储引擎是InnoDB 二&#xff1a;InnoDB 和 MyISAM 有什么区别? InnoDB支持事务&#xff0c;MyISAM不支持InnoD…

Bcrypt 加密算法

Bcrypt 加密算法研究与对比 Bcrypt解密工具下载&#xff08;暴力破解&#xff0c;需基于密码本&#xff09;

html综合笔记:设计实验室主页

&#xff11; 主页来源及效果 Overview - Lab Website Template docs (gitbook.io) greenelab/lab-website-template: An easy-to-use, flexible website template for labs (github.com) 2 创建网页 3 主要的一些file 3.1 index.md 主页面 3.1.1 intro 3.1.2 highlight …

springBoot 配置druid多数据源 MySQL+SQLSERVER

1:pom 文件引入数据 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.1.0</version> </dependency>…

Unity使用Visual Studio Code 调试

Unity 使用Visual Studio Code 调试C# PackageManager安装Visual Studio EditorVisual Studio Code安装Unity 插件修改Unity配置调试 PackageManager安装Visual Studio Editor 打开 Window->PackageManger卸载 Visual Studio Code Editor &#xff0c;这个已经被官方废弃安…

【C++ STL】string类-----迭代器(什么是迭代器?迭代器分哪几类?迭代器的接口如何使用?)

目录 一、前言 二、什么是迭代器 三、迭代器的分类与接口 &#x1f4a6;迭代器的分类 &#x1f4a6;迭代器的接口 &#x1f4a6;迭代器与接口之间的关联 四、string类中迭代器的应用 &#x1f4a6; 定义string类----迭代器 &#x1f4a6;string类中迭代器进行遍历 ✨be…

【课程文章】微信小程序学习指南

本文章是配合【微信小程序】视频教程的指南目录文章 准备软件&#xff1a;这些软件可以在&#xff08;点击这里&#xff09;【微课百家】下载。 1.MySQL数据&#xff1b; 2.Navicat工具&#xff1b; 3.TodoDemo或者TeachDemo&#xff0c;配合小程序使用的后端对接平台源代码…

数据结构【DS】数组

在应用题中&#xff0c;“数组”常结合“矩阵压缩存储”考察&#xff0c;此类题目需要注意以下条件&#xff1a; ✧ 行优先存储 or 列优先存储&#xff1f; ✧ 矩阵下标从 1 or 0 开始&#xff1f;——若题目未特别说明&#xff0c;矩阵下标默认从1开始 ✧ 数组下标从 0 or 1 开…

【Spring Boot】如何集成Redis

在pom.xml文件中导入spring data redis的maven坐标。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency> 在application.yml文件中加入redis相关配置。 spr…

Python---数据序列类型之间的相互转换---list()方法:转化为列表。tuple() 方法转化为元组。set()方法:转换成集合。

list()方法&#xff1a;把某个序列类型的数据转化为列表 ------列表本身英文就是list 序列 &#xff1a;包括 字符串、列表、元组、集合以及字典。 # 1、定义 元组类型 的序列 tuple1 (10, 20, 30) print(list(tuple1))# 2、定义一个 集合类型的序列 set1 {a, b, c, d}…

NewStarCTF2023 Reverse Week3 EzDLL WP

分析 这里调用了z3h.dll中的encrypt函数。 用ida64载入z3h.dll 直接搜索encrypt 找到了一个XTEA加密。接着回去找key和密文。 发现key 这里用了个调试状态来判断是否正确&#xff0c;v71&#xff0c;要v7&#xff1d;1才会输出Right&#xff0c;即程序要处于飞调试状态。 可…

如何建设一个高效的中英文外贸网站?

随着全球化的趋势&#xff0c;越来越多的企业需要搭建中英文网站来拓展国际业务。搭建中英文网站不仅可以提高企业在国际市场的知名度和影响力&#xff0c;还可以增加与海外客户的交流和合作机会。企业不仅需要有一个出色的英文网站来吸引国际客户&#xff0c;还需要有一个精准…

php-cli

//运行index.php ./php index.php//启动php内置服务器 ./php -S 0.0.0.0:8080//启动内置服务在后台运行&#xff0c;日志输出到本目录下的server.log nohup ./php -S 0.0.0.0:8080 -t . > server.log 2>&1 &# 查找 PHP 进程 ps aux | grep "php -S 0.0.0.0:…

趣学python编程 (五、常用IDE环境推荐)

Python环境指的是在计算机上安装Python解释器和相关的库&#xff0c;它是运行Python代码所必需的。那么开始Python编程前&#xff0c;准备安装好开发环境是前提。 默认的电脑上只是让人办公使用的&#xff0c;不带python编程开发环境。只有安装python环境&#xff0c;才可以编写…

记录下学的性能优化

一、性能优化的指标和工具 1.1 谷歌浏览器 拿淘宝网站为例,可以看到当前网页的加载信息 这个是瀑布图,瀑布图有横向和纵向 横向是具体的加载数据,悬浮看详情列表,可以看出下载时最后一个步骤,在这之前会先排队,浏览器会对优先级进行安排,它会对高优先级的请求优先请求.然后通…

Vue-router的动态路由:获取传递的值

假设我们有一个Vue应用程序&#xff0c;需要展示不同用户的个人资料页面。我们可以使用Vue-router的动态路由来达到这个目的&#xff0c;它允许我们根据不同的URL参数动态地加载不同的组件&#xff0c;并且可以获取传递的值。例如&#xff1a; 我们的路由配置如下&#xff1a;…