關(guān)于element el-input的autofocus失效的問(wèn)題及解決
更新時(shí)間：2022年12月07日 16:58:13 作者：林間風(fēng)雨
這篇文章主要介紹了關(guān)于element el-input的autofocus失效的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
element el-input的autofocus失效
需求：下拉新增row, 最后一個(gè)定位focus
<el-table
:data="infoData.itemList"
fit
header-cell-class-name="cellClass"
row-class-name="rowClass"
>
<el-table-column v-if="userType === 2" width="50">
<template slot-scope="{$index}">
<div class="control-row">
<div @click="deleteRowData($index)">-</div>
</div>
</template>
</el-table-column>
<el-table-column prop="sampleName" label="序號(hào)" align="center" width="63" >
<template slot-scope="{$index}">
<el-input :value="$index + 1" disabled="true"/>
</template>
</el-table-column>
<el-table-column prop="sampleName" label="樣品名稱(chēng)">
<template slot-scope="{row, $index}">
<el-input v-model="row.sampleName" placeholder="請(qǐng)輸入" :disabled="checkId(row.id)" :ref="'rowInput' + $index" />
</template>
</el-table-column> // 新增行
addRowData() {
this.infoData.itemList.push({
sampleName: '', // 樣品名稱(chēng)
detectionProject: '', // 檢測(cè)項(xiàng)目
standard: '', // 標(biāo)準(zhǔn)
consequence: '', // 結(jié)果
isQualified: 1, // 是否合格 ( 0: 是，1：否 )
actionResults: '通過(guò)', // 處置措施
detectionUser: '' // 檢測(cè)人
})
const len = this.infoData.itemList.length - 1
this.$nextTick(() => {
this.$refs['rowInput' + len].$refs.input.focus();
})
},elementUI el-input每次輸入一個(gè)字符后自動(dòng)失去焦點(diǎn)
input輸入框每次輸入一次就失去焦點(diǎn)，由于第一次開(kāi)發(fā)后臺(tái)管理系統(tǒng)
最開(kāi)始以為是autocomplete的原因，很快發(fā)現(xiàn)不是，后來(lái)發(fā)現(xiàn)是因?yàn)関-for綁定的key值原因
v-for="(item,index) in signUpFormProps" :key="item.value+index"
顯然每次輸入改變了item.value的值導(dǎo)致其進(jìn)行了渲染，將item.value值去掉后問(wèn)題就解決了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法
這篇文章主要介紹了Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了Vue監(jiān)視數(shù)據(jù)的原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
VUE3+TS遞歸組件實(shí)現(xiàn)TreeList設(shè)計(jì)實(shí)例詳解
這篇文章主要為大家介紹了VUE3+TS遞歸組件實(shí)現(xiàn)TreeList設(shè)計(jì)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue的狀態(tài)更新方式(異步更新解決)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
VUE watch監(jiān)聽(tīng)器的基本使用方法詳解
這篇文章主要介紹了vue使用watch監(jiān)聽(tīng)器的基本使用方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
這篇文章主要給大家介紹了關(guān)于Vue使用虛擬鍵盤(pán)及中英文切換的相關(guān)資料,有時(shí)候在大型觸屏設(shè)備(如雙屏設(shè)備)中往往就沒(méi)有鍵盤(pán)去操作,所以就需要去建立一個(gè)虛擬鍵盤(pán)去操作,需要的朋友可以參考下2023-06-06
Vue+Electron打包桌面應(yīng)用(超詳細(xì)完整教程)
這篇文章主要介紹了Vue+Electron打包桌面應(yīng)用超詳細(xì)完整教程,在這大家要記住整個(gè)項(xiàng)目的json文件不能有注釋,及時(shí)沒(méi)報(bào)錯(cuò)也不行,否則運(yùn)行命令時(shí)還是有問(wèn)題,具體細(xì)節(jié)問(wèn)題參考下本文詳細(xì)講解2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue-cropper實(shí)現(xiàn)裁剪圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果【推薦】
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果的思路詳解，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
Vue中實(shí)現(xiàn)回車(chē)鍵切換焦點(diǎn)的方法
這篇文章主要介紹了在Vue中實(shí)現(xiàn)回車(chē)鍵切換焦點(diǎn)的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02