elementUI el-input focus

• 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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。