1.el-table点击单元格变成输入框
这里主要使用了el-table三个自带的方法/属性：
<el-table:data="MesTableData"border@cell-click="clickCell":row-class-name="tableRowClassName":cell-class-name="tableCellClassName"
>clickCell：单元格的点击事件，用于根据当前点击的行列信息决定变成输入框的cell。
row-class-name与cell-class-name用于获取每个单元格的行列信息以便定位cell。
// 把每行的索引放进row中
tableRowClassName({ row, rowIndex }) {row.index = rowIndex;
},
// 把每列的索引放进column中
tableCellClassName({ column, columnIndex }) {column.index = columnIndex;
},这样，在点击的时候就可以获取到相关信息了：
clickCell(row, column){// 获取行列Index并存在一个数组中this.activeCellIndex = [row.index, column.index];// 使其获取焦点this.$nextTick(() => {this.$refs['tab'+row.index+column.index].focus()})
},（表格处部分代码展示，根据activeCellIndex判断是否展示el-input框）
<el-table-column prop="value1" label="变量1"><template slot-scope="scope"><el-input :ref="'tab'+scope.row.index+scope.column.index" v-if="scope.row.index === activeCellIndex[0] && scope.column.index === activeCellIndex[1]" v-model="scope.row.value1"></el-input><div v-else>{{scope.row.value1}}</div></template>
</el-table-column><el-table-column prop="value2" label="变量2"><template slot-scope="scope"><el-input :ref="'tab'+scope.row.index+scope.column.index" v-if="scope.row.index === activeCellIndex[0] && scope.column.index === activeCellIndex[1]" v-model="scope.row.value2"></el-input><div v-else>{{scope.row.value2}}</div></template>
</el-table-column>即可实现效果:
2.获取焦点失效可能原因：
可能1：需在定时器或nextTick中获取ref并focus()。
可能2：有时提高ref获取焦点时可以打印出ref对应DOM，但是focus却不生效。
后来笔者通过document.querySelectorAll方法发现获取到的该类名的Dom不止一个。经过排查是el-table的一列设置了fixed（固定）所导致的。设置它会自动生成一列并不显示，造成focus失效的假象。
解决方法：获取第一个符合条件的Dom并获取其焦点。（是这个思路，解决方法不唯一）
以下是笔者的解决方案：
1.先为el-input定义类名，方便获取：
<el-table-column label="变量1"><template slot-scope="scope"><el-input :class="'tab'+scope.row.index+scope.column.index" :ref="'tab'+scope.row.index+scope.column.index" v-if="scope.row.index == activeCellIndex[0] && scope.column.index == activeCellIndex[1]" v-model="scope.row.value1"></el-input></template>
</el-table-column>2.获取真正的input并获取其焦点（方法不一，这里使用的jQuery）
clickCell(row, column){this.activeCellIndex = [row.index, column.index];this.$nextTick(() => {let aimDom = (document.querySelectorAll('.'+'tab'+row.index+column.index));// 此处打印aimDom发现有两个dom，组成一个数组。// this.$refs['tab'+row.index+column.index].focus(); //失效的原方法// 获取第一个符合条件的目标Dom，并获取焦点（笔者这里用的jQuery实现）// 因为el-input中的input标签是包裹在其中的，所以获取其children并focus()。$('.'+'tab'+row.index+column.index).children()[0].focus();})
},效果实现！
希望本文会对你有所帮助~ ^_^
