關于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ā)現不是,后來發(fā)現是因為v-for綁定的key值原因
v-for="(item,index) in signUpFormProps" :key="item.value+index"
顯然每次輸入改變了item.value的值導致其進行了渲染,將item.value值去掉后問題就解決了
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。