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组件将被销毁,重新显示表格的文字格式单元格。

相关推荐
VX:Fegn08951 小时前
计算机毕业设计|基于springboot + vue云租车平台系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
小安驾到2 小时前
【前端的坑】vxe-grid表格tooltip提示框不显示bug
前端·vue.js
计算机学姐2 小时前
基于SpringBoot的校园社团管理系统
java·vue.js·spring boot·后端·spring·信息可视化·推荐算法
Liu.7743 小时前
vue开发h5项目
vue.js
pas1364 小时前
42-mini-vue 实现 transform 功能
前端·javascript·vue.js
柒.梧.4 小时前
从零搭建SpringBoot+Vue+Netty+WebSocket+WebRTC视频聊天系统
vue.js·spring boot·websocket
毕设源码-钟学长5 小时前
【开题答辩全过程】以 基于node.js vue的点餐系统的设计与实现为例,包含答辩的问题和答案
前端·vue.js·node.js
小白路过5 小时前
记录vue-cli-service serve启动本地服务卡住问题
前端·javascript·vue.js
梵得儿SHI5 小时前
Vue 高级特性:渲染函数与 JSX 精讲(h 函数语法、JSX 在 Vue 中的应用)
前端·javascript·vue.js·jsx·模板语法·渲染函数·底层视图生成机制
David凉宸5 小时前
Vue 3 项目的性能优化策略:从原理到实践(页面展示)
javascript·vue.js·性能优化