- Q1. el-input 獲取焦點
- Q2. dialog中的 el-input獲取焦點
- Q3. dialog中有table table中有 el-input 要獲取焦點
一個宗旨: this.$refs.XXX.$el.querySelector('input').focus();
answer 1
<el-input ref="mark"></el-input>
使用時直接 (對于多個el-input也是一樣的)
this.$refs.mark.$el.querySelector('input').focus();
answer 2
需要在dialog打開時候讓input獲取焦點
<el-dialog
title="銷售員"
:visible.sync="customerVisible"
@open="customerDialogOpen" // 這個是重點
>
<el-input ref="customerInput" ></el-input>
</el-dialog>
//銷售員 dialog 打開時 獲取焦點
customerDialogOpen() {
this.customerVisible = true
this.$nextTick(function () {
this.$refs.customerInput.$el.querySelector('input').focus();
});
},
answer 3
<el-dialog title="結賬" :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="結算方式"
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: '現金',
disabled: true,
ref: 'input1',
}, {
code: '02',
way: '銀行卡',
disabled: false,
ref: 'input2',
}
]
下面就清楚了吧,跟上面2 的套路一樣
//結算 dialog 打開時 獲取焦點
sumDialogOpen() {
this.sumVisible = true
this.$nextTick(function () {
this.$refs.input2.$el.querySelector('input').focus();
});
},
至于多個input之間焦點如何切換,
down2next(e) {
let input
switch (e) {
case "input1":
input = `input2`
break
case "input2":
input = `input3`
break
}
this.$refs[input].$el.querySelector('input').focus();
},
各位兄臺有沒有便捷的方法?總感覺這樣寫的好蠢 啊,:smile: