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

相关推荐
sugar__salt15 小时前
Vue3 表单双向绑定与响应式核心 API 技术详解
前端·javascript·vue.js
郝亚军15 小时前
使用Vue 3和Nginx打包和部署Vue.js项目的一般步骤
前端·vue.js·nginx
阿懂在掘金17 小时前
企业级命令式弹窗方案:三行代码适配已有 Dialog
前端·vue.js·前端框架
YWL18 小时前
OpenLayers + Vue 2 使用指南(01)
前端·javascript·vue.js
达子66619 小时前
第8章_HarmonyOs开发图解 剪贴板
vue.js
森林的尽头是阳光20 小时前
tree回显问题
javascript·vue.js·elementui
qetfw21 小时前
MWU:Vue 3 + FastAPI 的 MaaFramework 跨平台 WebUI 源码
前端·vue.js·python·fastapi·开源项目·效率工具
mfxcyh21 小时前
Vue3+Ant Design Vue 实现手动异步文件上传(含大小校验、弹窗上传)
前端·javascript·vue.js
meilindehuzi_a21 小时前
Vue3进阶基础:指令修饰符、v-model表单绑定、动态样式、计算属性与侦听器实战
前端·javascript·vue.js
csdn2015_1 天前
vue 前端运行命令
前端·javascript·vue.js