- Q1. el-input 獲取焦點(diǎn)
- Q2. dialog中的 el-input獲取焦點(diǎn)
- Q3. dialog中有table table中有 el-input 要獲取焦點(diǎn)
一個(gè)宗旨: this.$refs.XXX.$el.querySelector('input').focus();
answer 1
<el-input ref="mark"></el-input>
使用時(shí)直接 (對于多個(gè)el-input也是一樣的)
this.$refs.mark.$el.querySelector('input').focus();
answer 2
需要在dialog打開時(shí)候讓input獲取焦點(diǎn)
<el-dialog
title="銷售員"
:visible.sync="customerVisible"
@open="customerDialogOpen" // 這個(gè)是重點(diǎn)
>
<el-input ref="customerInput" ></el-input>
</el-dialog>
//銷售員 dialog 打開時(shí) 獲取焦點(diǎn)
customerDialogOpen() {
this.customerVisible = true
this.$nextTick(function () {
this.$refs.customerInput.$el.querySelector('input').focus();
});
},
answer 3
<el-dialog title="結(jié)賬" :visible.sync="sumVisible"
:close-on-click-modal="false"
@open="sumDialogOpen">
<el-table
:data="tableData"
size="mini"
style="width: 100%">
<el-table-column
prop="code"
label="編號"
width="50">
</el-table-column>
<el-table-column
prop="way"
label="結(jié)算方式"
width="80">
</el-table-column>
<el-table-column
label="金額">
<template slot-scope="scope">
<el-input size="mini" :ref="scope.row.ref" //看這里看這里
@keyup.up.native="up2pre(scope.row.ref)"
@keyup.down.native="down2next(scope.row.ref)">
</el-input>
</template>
</el-table-column>
...
</el-table>
</el-dialog>
tableData : [
{
code: '01',
way: '現(xiàn)金',
disabled: true,
ref: 'input1',
}, {
code: '02',
way: '銀行卡',
disabled: false,
ref: 'input2',
}
]
下面就清楚了吧赋朦,跟上面2 的套路一樣
//結(jié)算 dialog 打開時(shí) 獲取焦點(diǎn)
sumDialogOpen() {
this.sumVisible = true
this.$nextTick(function () {
this.$refs.input2.$el.querySelector('input').focus();
});
},
至于多個(gè)input之間焦點(diǎn)如何切換寡键,
down2next(e) {
let input
switch (e) {
case "input1":
input = `input2`
break
case "input2":
input = `input3`
break
}
this.$refs[input].$el.querySelector('input').focus();
},
各位兄臺(tái)有沒有便捷的方法?總感覺這樣寫的好蠢 啊娃惯,:smile: