關(guān)于element el-input的autofocus失效的問題及解決
更新時(shí)間：2022年12月07日 16:58:13 作者：林間風(fēng)雨
這篇文章主要介紹了關(guān)于element el-input的autofocus失效的問題及解決方案，具有很好的參考價(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="樣品名稱">
<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: '', // 樣品名稱
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)，由于第一次開發(fā)后臺(tái)管理系統(tǒng)
最開始以為是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值去掉后問題就解決了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
眾所周知，一個(gè)項(xiàng)目在開發(fā)、測(cè)試與生產(chǎn)環(huán)境的各種配置變量是不一樣的，但在vue cli 3中通過(guò)指令vue create xxx創(chuàng)建的項(xiàng)目取消了默認(rèn)的 config 和 build 文件夾，這導(dǎo)致剛?cè)胧值男』锇椴恢涝谀膬号渲铆h(huán)境變量，不過(guò)官方也提供了相應(yīng)的配置方法，本文就來(lái)介紹一下2021-08-08
這篇文章主要介紹了vue .sync修飾符的使用,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
Vue富文本插件(quill-editor)的使用及說(shuō)明
這篇文章主要介紹了Vue富文本插件(quill-editor)的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-02-02
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)進(jìn)度條變化效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
下面小編就為大家分享一篇vue里面父組件修改子組件樣式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue 中如何將函數(shù)作為 props 傳遞給組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 中如何將函數(shù)作為 props 傳遞給組件的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
這篇文章主要介紹了Vue混入mixins滾動(dòng)觸底的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue之a(chǎn)-table中實(shí)現(xiàn)清空選中的數(shù)據(jù)
今天小編就為大家分享一篇vue之a(chǎn)-table中實(shí)現(xiàn)清空選中的數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue調(diào)試工具vue-devtools的安裝與使用
vue-devtools是專門調(diào)試vue項(xiàng)目的調(diào)試工具,安裝成功之后,右邊會(huì)出現(xiàn)一個(gè)vue,就可以在線可以調(diào)試vue了,下面這篇文章主要給大家介紹了關(guān)于Vue調(diào)試工具vue-devtools的安裝與使用的相關(guān)資料,需要的朋友可以參考下2022-07-07
vue移動(dòng)端裁剪圖片結(jié)合插件Cropper的使用實(shí)例代碼
本篇文章主要介紹了vue移動(dòng)端裁剪圖片結(jié)合插件Cropper的使用實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07