开发软件下载网站,备案号放网站下面居中,百度开放平台登录,网站建设公司宣传文案需求
有一个表格展示了一些进度信息#xff0c;进度信息可以修改#xff0c;需要点击进度信息旁边的编辑按钮时#xff0c;把进度变为输入框且自动聚焦#xff0c;当鼠标失去焦点时自动请求更新接口。 注#xff1a;本例以vue2 element UI为例 分析
这个需求看着挺简单…需求
有一个表格展示了一些进度信息进度信息可以修改需要点击进度信息旁边的编辑按钮时把进度变为输入框且自动聚焦当鼠标失去焦点时自动请求更新接口。 注本例以vue2 element UI为例 分析
这个需求看着挺简单的啊不就是默认展示数字点击按钮时把数字变成输入框吗再给个自动聚焦autofocus再监听一下失去焦点事件这不就完了吗
示意图如下
于是我兴冲冲写下了如下代码 微解释默认显示数字且非编辑状态点击按钮时显示输入框 el-table-column label完成占比 propprogress aligncentertemplate slot-scopescopediv v-if!scope.row.isEditing{{ scope.row.progress }}%el-button sizemini typetext clickhandleEditPercent(scope.$index, scope.row)i classel-icon-edit-outline/i/el-button/divel-input-numberv-else:refprogress scope.$indexv-modelscope.row.progress:min0:max100sizesmall:controlsfalsestylewidth: 80px;autofocusblurhandleBlur(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指令这次再点击编辑按钮终于亮了 原本以为是个小功能没想到坑这么多
