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

需求

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

注:本例以vue2 + element UI为例

分析

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

示意图如下:

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

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

ini 复制代码
<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-number
      v-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()方法

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

css 复制代码
directives: {
  focus: {
    inserted: function (el) {
      el.querySelector('input').focus()
    }
  }
},

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

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

相关推荐
祝余呀12 分钟前
HTML初学者第三天
前端·html
就爱瞎逛28 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81631 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者1 小时前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW3 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字3 小时前
Kotlin lazy 委托的底层实现原理
前端