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

本文基于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.mzph.cn/news/844851.shtml

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

相关文章

如何使用Cloudways搭建WordPress网站(附最新Cloudways优惠码)

如今&#xff0c;搭建网站已经变得非常简单&#xff0c;这主要得益于开源的CMS建站系统的兴起。即使是不懂编程的人也能轻松搭建自己的网站&#xff0c;这些CMS系统提供了丰富的主题模板和插件&#xff0c;使用户可以通过简单的拖放和配置操作来建立自己的网站。 WordPress是目…

子网划分案例

4.2子网划分 “有类编址”的地址划分过于死板&#xff0c;划分的颗粒度太大&#xff0c;会有大量的主机号不能被充分利用&#xff0c;从而造成了大量的IP地址资源浪费。因此可以利用子网划分来减少地址浪费&#xff0c;即VLSM (Variable Length Subnet Mask)&#xff0c;可变长…

Vue3学习- setup 使用 useRoute函数返回为 undefined,语法糖与非语法糖的错误、正确的写法情况

代码情况 import { ref,computed,watch,reactive } from vue import { RouterView,RouterLink,useRoute,useRouter } from vue-router import HelloWorld from ./components/HelloWorld.vue function toggleRoute(){const temprou useRoute()console.log(temprou); }正确 im…

国内前十款专业外盘期货交易app软件排名盘点(综合版)

随着社会经济的不断发展&#xff0c;现在投资者倾向于投资各种项目以获取超额收益。在选择外盘期货交易app软件时&#xff0c;有几个关键的因素需要考虑。首先是软件的可靠度和安全度&#xff0c;因为交易涉及到实际资金。因此&#xff0c;需要选择具备专业资质、经验丰富、充分…

mybatis问题汇总

Mapped Statements collection does not contain value for mapper.xml中namespace存在问题 使用 ${}实现关键字&#xff08;表名、列名&#xff09;的可变 #{} 和 ${} 的区别

Android下HWC以及drm_hwcomposer普法(上)

Android下HWC以及drm_hwcomposer普法(上) 引言 按摩得全套&#xff0c;错了&#xff0c;做事情得全套&#xff0c;普法分析也是如此。drm_hwcomposer如果对Android图形栈有一定研究的童鞋们应该知道它是Android提供的一个的图形后端合成处理HAL模块的实现。但是在分析这个之前…

汽车悬架分为哪几类

汽车悬架分为哪几类 1)汽车的悬架系统可根据结构分为两种:独立悬架和非独立悬架,独立悬架根据构造又可以分为CDC运动悬架(CDC电磁悬架系统)和空气悬架; 2)当前比较火热的空气悬架,是独立悬架的一种; 3)前轮主要使用麦弗逊式独立悬架 和 双叉臂悬架,后轮主要使用多…

实景三维简介

实景三维简介 一、实景三维定义 实景三维&#xff08;3D real scene&#xff09;&#xff0c;是一个专业术语&#xff0c;对一定范围内人类生产、生活和生态空间进行真实、立体、时序化反映和表达的数字空间。 对一定范围内人类生产、生活和生态空间进行真实、立体、时序化反…

倒角距离【Chamfer Distance】

倒角距离&#xff08;chamfer distance&#xff09;是用于评估两组点之间的相似度的度量。给定两个点集 A 和 B&#xff0c;倒角距离定义为 A 中每个点到 B 中最近邻点的距离之和&#xff0c;加上 B 中每个点到 A 中最近邻点的距离之和。它用于各种应用&#xff0c;包括计算机视…

nginx 反向代理配置详解

Nginx 反向代理是一种常用的部署策略&#xff0c;用于将客户端请求转发到内部网络中的一个或多个服务器&#xff0c;这些服务器直接处理请求并返回响应给Nginx&#xff0c;再由Nginx转交给客户端。这种设置可以提高网站的可用性和安全性&#xff0c;同时也能实现负载均衡、缓存…

数据分析——分群思维、RFM实现用户分群

分群思维 按照某个指标&#xff08;可以是用户生命周期、活跃度、付费&#xff09;来划分用户 分群好处&#xff1a; 1.是用户精细化运营的基础&#xff0c;也就是说只有分群了才可以针对每一个群进行运营策略 2.体现用户的差异性&#xff0c;比较不同层级的差异更能发现问题 …

每期一个小窍门 k8s版本的 Prometheus + grafana + alertmanager 三件套部署监控落地

首先部署prometheus 首先是pvc apiVersion: v1 kind: PersistentVolumeClaim metadata:name: prometheus-data-pvcnamespace: monitor spec:accessModes:- ReadWriteManystorageClassName: "data-nfs-storage"resources:requests:storage: 10Gi然后接着 cluster-ro…

CSS+Canvas绘制最美星空(一闪一闪亮晶晶效果+流星划过)

1.效果 2.代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><style>body,html {margin: 0;padding: 0;ov…

商业应用中的AI模型选择:开源还是闭源?

评价一个AI模型“好不好”、“有没有发展”&#xff0c;往往绕不开“开源”和“闭源”这两条不同的发展路径。这两种路径各有优劣&#xff0c;从数据隐私、商业应用和社区参与三个方面来看&#xff0c;我们可以更全面地理解它们的差异和影响。 方向一&#xff1a;数据隐私 开…

【Vue】v-on事件绑定指令

作用&#xff1a; 注册事件 添加监听 提供处理逻辑 使用Vue时&#xff0c;如需为DOM注册事件&#xff0c;及其的简单&#xff0c;语法如下&#xff1a; // 内联语句&#xff1a;就是一段可执行代码 // 内联语句是在模板中写代码&#xff0c;所以它是可以直接访问到里面的数…

Android12 将成果物生成到system和vendor分区

最近工作中遇到这么个事情&#xff0c;之前项目中留存的动态库是生成在vendor分区中&#xff0c;现在需要在system_ext分区中也生成&#xff0c;以便Android的系统进程也能访问这个动态库。 因此&#xff0c;需要修改对应动态库项目的Android.bp cc_library_shared { name: &qu…

20 VUE学习:插件

介绍 插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例&#xff1a; import { createApp } from vueconst app createApp({})app.use(myPlugin, {/* 可选的选项 */ })一个插件可以是一个拥有 install() 方法的对象&#xff0c;也可以直接…

CNAS软件测试公司作用分享,如何获取CNAS软件测试报告?

在软件测试行业&#xff0c;CNAS认可和CNAS软件测试公司是不可忽视的关键词。CNAS认可是指中国合格评定国家认可委员会对特定领域组织、机构或公司的能力和资质进行的认可过程。该认可遵循国际标准及相关法律法规&#xff0c;是评定组织或实验室技术能力和专业水平的权威认可&a…

ctfshow web入门 嵌入式 bash cpp pwn

kali转bash shell方法 方便我们本地 bash脚本教程 下面这个代码是bash脚本 #!/bin/bashOIFS"$IFS"IFS"," //表示逗号为字段分隔符set $QUERY_STRING //将参数传入数组Args($QUERY_STRING)IFS"$OIFS" //恢复原始IFS值if [ "$…

2024年5月28号PMP每日三题含答案

2024年5月28号PMP每日三题含答案 1.项目经理与项目干系人开会&#xff0c;获得关于如何最好地向施工现场输送用品的信息和知识。这使用的是哪种沟通方法类型&#xff1f; A.交互式沟通 B.内部沟通 C.拉式沟通 D.推式沟通 1.解析&#xff1a;A是参考答案。开会是交互式沟通。知…