ElementUI框架el-table组件中嵌入el-input输入框无法获取焦点、无法编辑问题

需求描述

在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，等待页面渲染完成。