關于element el-input的autofocus失效的問題及解決
更新時間:2022年12月07日 16:58:13 作者:林間風雨
這篇文章主要介紹了關于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: '', // 結果
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的值導致其進行了渲染,將item.value值去掉后問題就解決了
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue 中如何將函數(shù)作為 props 傳遞給組件的實現(xiàn)代碼
這篇文章主要介紹了Vue 中如何將函數(shù)作為 props 傳遞給組件的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
vue之a(chǎn)-table中實現(xiàn)清空選中的數(shù)據(jù)
今天小編就為大家分享一篇vue之a(chǎn)-table中實現(xiàn)清空選中的數(shù)據(jù),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue調(diào)試工具vue-devtools的安裝與使用
vue-devtools是專門調(diào)試vue項目的調(diào)試工具,安裝成功之后,右邊會出現(xiàn)一個vue,就可以在線可以調(diào)試vue了,下面這篇文章主要給大家介紹了關于Vue調(diào)試工具vue-devtools的安裝與使用的相關資料,需要的朋友可以參考下2022-07-07

