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