需求描述
在table
中嵌入输入框,使其可在线编辑。
问题
使用el-table
表格组件,在表格中利用插槽嵌入el-input
输入框。点击输入框无反应,无法获取当前输入框焦点,无法进行输入和编辑。
问题原因
原因不确定,推测原因可能是DOM
树渲染时,js执行速度比HTML
快,导致输入框对象未获取到,进而focus
方法失效。
解决方法
方法一
可利用el-table
的cell-click
事件,在点击输入框时,获取到该输入框对象,手动获取焦点,方法如下所示。
<!-- HTML结构 -->
<el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod" @cell-click="cellClickAction">
<el-table-column prop="firstMenu" label="一级菜单"></el-table-column>
<el-table-column prop="secondaryMenu" label="二级菜单(必填项)"></el-table-column>
<el-table-column prop="contentSecond" label="内容">
<template slot-scope="scope">
<el-input v-model="scope.row.contentSecond" placeholder="请输入内容" clearable></el-input>
</template>
</el-table-column>
<el-table-column prop="thirdMenu" label="三级菜单"></el-table-column>
<el-table-column prop="contentThird" label="内容"></el-table-column>
</el-table>
// 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
,监听单击事件进行聚焦。方法如下。
<el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod">
<el-table-column prop="firstMenu" label="一级菜单"></el-table-column>
<el-table-column prop="secondaryMenu" label="二级菜单(必填项)"></el-table-column>
<el-table-column prop="contentSecond" label="内容">
<template slot-scope="scope">
<div @click="elementFocus(scope.row.key+'_contentSecond',scope.row.index)">
<el-input v-model="scope.row.contentSecond" :id="scope.row.key+'_contentSecond'" placeholder="请输入内容" clearable></el-input>
</div>
</template>
</el-table-column>
<el-table-column prop="thirdMenu" label="三级菜单"></el-table-column>
<el-table-column prop="contentThird" label="内容"></el-table-column>
</el-table>
elementFocus(id){
document.getElementById(id).focus();
},
注意:需要保证id
的唯一性。不建议定义ref
,使用$refs
方式获取焦点,该方法同样存在获取元素失败的问题,如要使用,可尝试在$nextTick
中调用ref
,等待页面渲染完成。