1、先說(shuō)需求
a.在表格編輯態(tài)的時(shí)候，可以在①處敲擊“回車鍵”，光標(biāo)能跳轉(zhuǎn)到②處
b.表格可以在瀏覽態(tài)和編輯態(tài)切換，用v-show來(lái)實(shí)現(xiàn)的編輯和瀏覽
2、代碼片段（這種方式不生效）
????????頁(yè)面顯示代碼：
<el-table-column label="產(chǎn)量" prop="ptCn" width="110px" header-align="center" align="center">
<template slot-scope="scope">
<div v-show="scope.row.edit">
<el-input :ref="'ptCn' + scope.row.index" v-model="scope.row.ptCn" @keyup.enter.native="inputFocus('ptCn', scope.row.index)"></el-input>
</div>
<div v-show="!scope.row.edit">
{{ scope.row.ptCn }}
</div>
</template>
</el-table-column>methods方法：
// 回車點(diǎn)擊事件
inputFocus(flag, index) {
const nextRow = flag + (++index)
console.log("refs = ");
console.log(this.$refs);
console.log("nextRow = ");
console.log(this.$refs[nextRow]);
console.log("光標(biāo)定位前。。。");
this.$refs[nextRow].focus();
console.log("光標(biāo)定位后。。。");
},3、頁(yè)面效果
如圖，當(dāng)在第一行 9999 處敲擊回車之后，控制臺(tái)打印出了this.$refs的所有組件，也打印了定位前和定位后的log日志，且沒有報(bào)錯(cuò)，說(shuō)明我們的代碼是正確執(zhí)行了的，但是光標(biāo)沒有變，還是在第一行。
4、百度了以下幾個(gè)原因，但是改了之后依舊是不管用
Element UI輸入框focus()方法自動(dòng)獲取焦點(diǎn)失敗處理方法_element focus_冒泡_L的博客-CSDN博客
Vue Element UI input輸入框focus()無(wú)法獲取焦點(diǎn)_vue使用v-show隱藏input框后不再能聚焦_ALL700的博客-CSDN博客
Element UI輸入框focus()方法自動(dòng)獲取焦點(diǎn)失敗處理方法 - 行業(yè)資訊 - 電子產(chǎn)品設(shè)計(jì)開發(fā)與電子技術(shù)學(xué)習(xí)交流！
vue element popover input focus() 不生效 解決辦法 | 碼農(nóng)家園
5、分析原因
我又試了一下，當(dāng)不把<el-input>標(biāo)簽放在<el-table>里的時(shí)候，比如正常表單（ref不是通過(guò)動(dòng)態(tài)賦值）的時(shí)候，這段代碼是完全沒有問(wèn)題的。所以問(wèn)題應(yīng)該是出在了<el-table>上，不知道Element-ui加了什么限制或者Vue的什么bug，導(dǎo)致的代碼執(zhí)行了，但是光標(biāo)卻沒有移動(dòng)
6、改為原生DOM的方式（自測(cè)生效）
頁(yè)面顯示代碼：（將 ref 改為 id，其他都沒變）
<el-table-column label="產(chǎn)量" prop="ptCn" width="110px" header-align="center" align="center">
<template slot-scope="scope">
<div v-show="scope.row.edit">
<!-- 僅僅是將這里的 ref 改為了 id -->
<el-input :id="'ptCn' + scope.row.index" v-model="scope.row.ptCn" @keyup.enter.native="inputFocus('ptCn', scope.row.index)"></el-input>
</div>
<div v-show="!scope.row.edit">
{{ scope.row.ptCn }}
</div>
</template>
</el-table-column>methods方法：（將this.$refs 改為 document.getElementById）
// 回車點(diǎn)擊事件
inputFocus(flag, index) {
const nextRow = flag + (++index)
console.log("nextRow = ");
console.log(document.getElementById(nextRow));
console.log("光標(biāo)定位前。。。");
document.getElementById(nextRow).focus();
console.log("光標(biāo)定位后。。。");
},
頁(yè)面效果：（在第一行的 9999 處敲擊 回車鍵，此時(shí)能正常跳轉(zhuǎn)到第二行的 27447 處）
7、總結(jié)：
學(xué)好HTML，JS，CSS吧（這是基礎(chǔ)的基礎(chǔ)），無(wú)論框架怎么變，底層都是這東西，當(dāng)發(fā)現(xiàn)框架不支持的時(shí)候，可以考慮考慮原生的DOM實(shí)現(xiàn)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-754508.html
8、至于為啥this.$refs.xxx.focus() 這個(gè)方法不生效，目前還沒有研究出來(lái)，有知道的大佬歡迎留言在這篇文章的評(píng)論區(qū)，共勉！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-754508.html
到了這里，關(guān)于Vue + el-ui table 內(nèi)嵌 input 調(diào)用 focus 方法無(wú)效；this.$refs.xxx.focus()方法無(wú)效的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
