Ant design vue的表格双击编辑功能(即双击开始编辑并自动获得焦点,失去焦点时完成编辑)

news2024/9/20 15:03:50

本文基于Ant Design Vue官方网站的表格(可编辑单元格)(表格 Table - Ant Design Vue (antdv.com))中的样板代码获得双击编辑且获得焦点、失去焦点时完成编辑的功能。

要点:

(1)双击时候实现编辑,则在模板中非编辑状态单元格标签上添加dbclick事件。

(2)在<a-input>标签中,添加:ref="setMyEditingInputRef"属性【注:setMyEditingInputRef可以随意取名字,只要和script标签中对应方法名相同即可】,并在<script setup>标签中添加同名方法,在该方法中将标签引用临时保存起来。(注意ref前加上冒号:)

(3)在edit方法中,添加获得焦点的方法,也就是每次进入到编辑状态时,输入框自动获得焦点。(这一步很关键)。

(4)在<a-input>标签中添加blur事件,失去焦点时调用save方法,从而将<a-input>中的数据保存到表格数据中。同时,a-input组件将被销毁,重新显示表格的文字格式单元格。

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

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

相关文章

docker同步bilibili收藏视频到群晖,可配合emby

作者是amtoaer&#xff0c;在github项目地址&#xff1a;https://github.com/amtoaer/bili-sync 有两个版本&#xff0c;1.0和2.0&#xff0c;我使用的是2.0 PS2&#xff1a;2.0和1.0版本目录结构不兼容&#xff0c;所以部署后会全量重新下载视频。 演示&#xff1a; 依然是…

解析售后维修服务平台如何助力企业高效运营与决策

随着生活质量的不断提高&#xff0c;人们对于售后服务的要求也越来越多。因此&#xff0c;售后服务已经成为企业竞争力的重要组成部分。售后服务平台作为连接企业与消费者的桥梁&#xff0c;不仅关乎着消费者的满意度&#xff0c;而且直接影响着企业的品牌形象与市场地位。那么…

用实践结果告诉你为啥说 CloudFlare 是赛博菩萨?

最近几天明月都没有更新博客了,主要是接了几个 CloudFlare 代维配置的活儿,有需要加速优化的,有需要排除疑难故障的,有需要提高防御攻击能力的甚至还有纯粹为了体验“打不死”装逼需要的。总之,各种各样的需求,五花八门的,好在 CloudFlare 都能一一满足,最主要的是这些…

VBA技术资料MF157:创建每个标题的目录

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

(Java面试题分享)万里长征-03-搜狐

万里长征-03-搜狐 ⚙ 以下内容基于GPT-4o模型 问题 1.LeetCode103 二叉树的锯齿形层序遍历 103. 二叉树的锯齿形层序遍历 - 力扣&#xff08;LeetCode&#xff09; 2.LeetCode5 最长回文子串 5. 最长回文子串 - 力扣&#xff08;LeetCode&#xff09; 3.Kafka为何那么快 …

Leetcode刷题笔记3:链表基础1

导语 leetcode刷题笔记记录&#xff0c;本篇博客记录链表基础1部分的题目&#xff0c;主要题目包括&#xff1a; 203.移除链表元素707.设计链表206.反转链表 知识点 链表 链表是一种通过指针串联在一起的线性结构&#xff0c;每一个节点由两部分组成&#xff0c;一个是数据…

vue3 依赖-组件tablepage-vue3版本1.1.2~1.1.5更新内容

github求⭐ 可通过github 地址和npm 地址查看全部内容 vue3 依赖-组件tablepage-vue3说明文档&#xff0c;列表页快速开发&#xff0c;使用思路及范例-汇总 vue3 依赖-组件tablepage-vue3说明文档&#xff0c;列表页快速开发&#xff0c;使用思路及范例&#xff08;Ⅰ&#…

002 仿muduo库实现高性能服务器组件_整体框架

​&#x1f308;个人主页&#xff1a;Fan_558 &#x1f525; 系列专栏&#xff1a;仿muduo &#x1f339;关注我&#x1f4aa;&#x1f3fb;带你学更多知识 文章目录 前言项目框架小结 前言 本文不会包含任何项目模块的代码&#xff0c;旨在向你介绍项目具体分为哪几个模块&am…

跨平台之用VisualStudio开发APK嵌入OpenCV(二)

开始干 新建解决方案&#xff0c;新建动态库&#xff08;Android&#xff09;项目 功能随便选一个吧&#xff0c;就模仿PS&#xff08;Photoshop&#xff09;的透视裁切功能&#xff0c;一个物体&#xff08;比如扑克牌&#xff09;透视图&#xff0c;选4个顶点&#xff0c;转…

上位机图像处理和嵌入式模块部署(f103 mcu和Qt上位机联动)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 之前我们写过一篇文章​​​​​​​&#xff0c;上面说的是如何利用串口对mcu进行控制&#xff0c;即如果利用串口实现mcu led灯的点亮和熄灭。输…

小程序迁移主体变更流程全攻略

小程序迁移变更主体有什么作用&#xff1f;有些小程序开发者&#xff0c;因为业务调整&#xff0c;或者公司更换&#xff0c;需要更换小程序主体&#xff01;但是很多开发者对于小程序更换主体的操作流程并不熟悉&#xff0c;于是我们专门准备了这篇&#xff0c;关于小程序更换…

性能测试学习(一)

一、概念 1.性能测试&#xff1a;使用自动化工具&#xff0c;模拟不同场景&#xff0c;对软件各项性能指标进行测试和评估的过程 2.包括&#xff1a;a.后台处理程序的性能&#xff1b;b.应用服务器、数据库、架构设计是否存在瓶颈&#xff1b;c.服务器资源消耗(CPU、内存、磁…

ISCC——AI

得到一个T4.pyc 回编译一下 得到下面代码 import base64def encrypt_and_compare(user_input, offset_str, target_base64):if len(user_input) ! 24:return Please enter a string with a length of 24encrypted Nonefor i, char in enumerate(user_input):offset int(off…

二元关系表示

一、二元关系的定义和表示 什么是二元关系&#xff1f;对集合A和B&#xff0c;A\timesB的任意子集R为A到B的一个二元关系。当AB时&#xff0c;A\timesA的任一子集R称为A上的一个二元关系。在不引起误解的情况下&#xff0c;二元关系可简称关系。 若|A|m,|B|n&#xff0c;则A到…

浅谈网络安全态势感知

前言 网络空间环境日趋复杂&#xff0c;随着网络攻击种类和频次的增加&#xff0c;自建强有力的网络安全防御系统成为一个国家发展战略的一部分&#xff0c;而网络态势感知是实现网络安全主动防御的重要基础和前提。 什么是网络安全态势感知&#xff1f; 态势感知一词来源于对…

MySQL数据库中的多表查询/连接查询操作

类型&#xff1a;内连接 &#xff0c;外连接{左外连接&#xff0c;右外连接} 之所以要使用连接查询的意义就是为了&#xff0c;借助数据库可以避免大量的数据重复。 进行连接查询的前提是要求多张表之间存在相关联的字段。 这里指的相关联的字段就是表与表之间存在着关系&am…

0元入驻抖音小店,真的是好事吗?

大家好&#xff0c;我是喷火龙。 抖音小店去年推出0元入驻抖音小店个人店的政策&#xff0c;简而言之就是只要一张身份证就可以开店&#xff0c;不需要营业执照&#xff0c;也不需要交保证金。 很多人一听很心动&#xff0c;因为没有任何成本就可以开店&#xff0c;于是纷纷跑…

二叉树的遍历(前序遍历,中序遍历,后序,层序遍历)和一些简单操作(由浅入深绝对能看懂)

欢迎大佬们的关顾能给个赞就更好啦QWQ 目录 二叉树的逻辑结构与物理结构 一.二叉树的遍历 &#xff08;1&#xff09;二叉树的前序遍历 &#xff08;2&#xff09;二叉树的中序遍历 &#xff08;3&#xff09;二叉树的后序遍历 &#xff08;4&#xff09;二叉树的层序遍历…

在PyCharm中import包标红

在程序头引入包&#xff0c;有时会出现标红 像上面的引入&#xff0c;在没有解决之前 sklearn.metrics 等都是标红的。因为缺少一些包&#xff0c;所以引入不了包中的一些函数 可以在左侧找到终端用命令安装包&#xff0c;用镜像可以加快下载速度 pip install 包名 -i https…

借助Kong记录接口的请求和响应内容

和APISIX类似&#xff0c;Kong也是一个Api GateWay。 运行在调用Api之前&#xff0c;以插件的扩展方式为Api提供管理, 如 鉴权、限流、监控、健康检查等. Kong是基于Lua语言、Nginx以及OpenResty开发的&#xff0c;拥有动态路由、负载均衡、高可用、高性能、熔断&#xff08;基…