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:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。