關(guān)于element el-input的autofocus失效的問題及解決
更新時間:2022年12月07日 16:58:13 作者:林間風雨
這篇文章主要介紹了關(guān)于element el-input的autofocus失效的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
element el-input的autofocus失效

需求:下拉新增row, 最后一個定位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="序號" 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="樣品名稱">
<template slot-scope="{row, $index}">
<el-input v-model="row.sampleName" placeholder="請輸入" :disabled="checkId(row.id)" :ref="'rowInput' + $index" />
</template>
</el-table-column> // 新增行
addRowData() {
this.infoData.itemList.push({
sampleName: '', // 樣品名稱
detectionProject: '', // 檢測項目
standard: '', // 標準
consequence: '', // 結(jié)果
isQualified: 1, // 是否合格 ( 0: 是,1:否 )
actionResults: '通過', // 處置措施
detectionUser: '' // 檢測人
})
const len = this.infoData.itemList.length - 1
this.$nextTick(() => {
this.$refs['rowInput' + len].$refs.input.focus();
})
},elementUI el-input每次輸入一個字符后自動失去焦點

input輸入框每次輸入一次就失去焦點,由于第一次開發(fā)后臺管理系統(tǒng)
最開始以為是autocomplete的原因,很快發(fā)現(xiàn)不是,后來發(fā)現(xiàn)是因為v-for綁定的key值原因
v-for="(item,index) in signUpFormProps" :key="item.value+index"
顯然每次輸入改變了item.value的值導(dǎo)致其進行了渲染,將item.value值去掉后問題就解決了
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法
這篇文章主要介紹了Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
VUE3+TS遞歸組件實現(xiàn)TreeList設(shè)計實例詳解
這篇文章主要為大家介紹了VUE3+TS遞歸組件實現(xiàn)TreeList設(shè)計實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09
Vue+Electron打包桌面應(yīng)用(超詳細完整教程)
這篇文章主要介紹了Vue+Electron打包桌面應(yīng)用超詳細完整教程,在這大家要記住整個項目的json文件不能有注釋,及時沒報錯也不行,否則運行命令時還是有問題,具體細節(jié)問題參考下本文詳細講解2024-02-02

