- 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:
作者:小学生的博客
链接:https://www.jianshu.com/p/63bfbbbd1e82
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。