当前位置: 首页 > web >正文

el-table中el-input的autofocus无法自动聚焦的解决方案

需求

有一个表格展示了一些进度信息,进度信息可以修改,需要点击进度信息旁边的编辑按钮时,把进度变为输入框且自动聚焦,当鼠标失去焦点时自动请求更新接口。

注:本例以vue2 + element UI为例

分析

这个需求看着挺简单的啊,不就是默认展示数字,点击按钮时,把数字变成输入框吗,再给个自动聚焦autofocus,再监听一下失去焦点事件,这不就完了吗

示意图如下:
在这里插入图片描述

于是,我兴冲冲写下了如下代码

微解释:默认显示数字且非编辑状态,点击按钮时,显示输入框

<el-table-column label="完成占比" prop="progress" align="center"><template slot-scope="scope"><div v-if="!scope.row.isEditing">{{ scope.row.progress }}%<el-button size="mini" type="text" @click="handleEditPercent(scope.$index, scope.row)"><i class="el-icon-edit-outline"></i></el-button></div><el-input-numberv-else:ref="'progress' + scope.$index"v-model="scope.row.progress":min="0":max="100"size="small":controls="false"style="width: 80px;"autofocus@blur="handleBlur(scope.$index, scope.row)"></el-input-number></template>
</el-table-column>

但是,你在点击编辑按钮时,虽然显示了输入框,但是无法自动聚焦,点击后如下所示:
在这里插入图片描述

解决过程

看到没自动聚焦,于是乎我又想到手动聚焦,文档里有这方法,然后我又兴冲冲地试了下:
在这里插入图片描述

但是这是el-table中的el-input,都是循环渲染的,单个ref变了和值不好处理,虽然也能做,但这种方法也失败了。

后来分析了下,el-table 属于动态渲染组件,在表格渲染时,el-input 可能还未完全挂载到 DOM 上,所以 autofocus 属性不能正常发挥作用。

于是就转换了下思路,我也不需要啥啥乱七八糟的东西了,我只希望这个el-input出现时,我能通过这个dom节点的父节点查询到input,然后执行focus()方法

于是,我又封装了个指令,这下就不用管其他乱七八糟的东西了,只需要专注于本身:

directives: {focus: {inserted: function (el) {el.querySelector('input').focus()}}
},

然后在el-input里加了v-focus指令,这次再点击编辑按钮,终于亮了

在这里插入图片描述

原本以为是个小功能,没想到坑这么多!

http://www.xdnf.cn/news/1157.html

相关文章:

  • DasViewer软件打开、保存、关闭文件
  • 部署私有gitlab网站
  • 基于大语言模型的减肥健身计划系统设计与实现
  • 小雨滴的奇妙旅行
  • 【MQ篇】RabbitMQ初体验!
  • 残差(Residual)
  • (区间 dp)洛谷 P6879 JOI2020 Collecting Stamps 3 题解
  • Spring Boot 应用优雅关闭
  • MYSQL—两阶段提交
  • 4.基础开发工具
  • stat判断路径
  • 【设计模式】深入解析代理模式(委托模式):代理模式思想、静态模式和动态模式定义与区别、静态代理模式代码实现
  • 基于PHP+MySQL实现(Web)单词助手网站
  • 基于javaweb的SSM+Maven教材管理系统设计与实现(源码+文档+部署讲解)
  • 深入理解 Java 中的 Classpath
  • 【Java面试笔记:基础】3.谈谈final、finally、 finalize有什么不同?
  • [Java] 泛型
  • Python 设计模式:享元模式
  • JVM虚拟机-类加载器、双亲委派模型、类装载的执行过程
  • 虚无隧穿产生宇宙(true nothing tunneling) 这个的真空是哪种
  • GitLab 提交权限校验脚本
  • 界面控件DevExpress WPF v25.1预览 - 支持Windows 11系统强调色
  • MuJoCo中的机器人状态获取
  • 第六篇:linux之解压缩、软件管理
  • Vue3集成sass
  • Unity 跳转资源商店,并打开特定应用
  • 滑动窗口学习
  • 【HTTPS协议原理】数据加密、如何防止中间人攻击、证书和签名、HTTPS完整工作流程
  • UnityDots学习(四)
  • 关于RPC