el-table组件中嵌入el-input输入框无法编辑

需求描述问题问题原因解决方法方法一方法二

需求描述

在table中嵌入输入框,使其可在线编辑。

问题

使用el-table表格组件,在表格中利用插槽嵌入el-input输入框。点击输入框无反应,无法获取当前输入框焦点,无法进行输入和编辑。

问题原因

原因不确定,推测原因可能是DOM树渲染时,js执行速度比HTML快,导致输入框对象未获取到,进而focus方法失效。

解决方法

方法一

可利用el-table的cell-click事件,在点击输入框时,获取到该输入框对象,手动获取焦点,方法如下所示。

// cellClickAction方法,使用event判断当前节点类型,event具体内容可自行打印查看

cellClickAction(row,column, cell, event){

if (event.target.nodeName === "INPUT" || event.target.nodeName === "TEXTAREA") {

event.target.focus();

}

},

方法二

直接使用原生js的getElementById方法,获取到要编辑的输入框。由于直接在el-input使用click方法监听无效(DOM树生成时会移除el-input的click事件),可以在el-input外包裹一层DIV,监听单击事件进行聚焦。方法如下。

elementFocus(id){

document.getElementById(id).focus();

},

注意:需要保证id的唯一性。不建议定义ref,使用$refs方式获取焦点,该方法同样存在获取元素失败的问题,如要使用,可尝试在$nextTick中调用ref,等待页面渲染完成。

精彩内容

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: