關(guān)于Vue的獲取焦點的問題,失去之后保存的一個效果.

采用的框架是vue+Element-UI,
現(xiàn)在遇到的問題是在一個表格里面,有一項是等級的表格.
點擊當(dāng)前的單元格input標(biāo)簽顯示并且獲取焦點,改變數(shù)值之后失去焦點保存數(shù)據(jù),input隱藏,
vue官網(wǎng)上有個自定義指令,是用來獲取焦點的.但是貌似在我這里不管用,看看各位還有其他的方法么.接下來看代碼吧!

                <el-table-column prop="orderCount" label="等級" align="center">
                <template slot-scope="{row,$index}">
                    <div>
          <!--   @click="chengenum($index)"  -->
                        <!--   v-show="!editable[$index]"         :class="editable[$index] ? 'activeClass' : 'count-num'"  -->
                    <el-input type="text"
                    v-show="editable[$index]"
                    v-model.number.lazy='row.orderCount'
                    v-on:blur="changeCount(row,$index)"></el-input>
                    <span  @click="chengenum($index)" v-focus class="input-num" v-show="!editable[$index]">{{row.orderCount}}</span>
                    </div>
                </template>
            </el-table-column>

  changeCount(row, index) {
  this.grade = row.orderCount * 1;
  let _this = this;
  let datecount = {
    id: row.id,
    orderCount: _this.grade
  };
  let sorting = "這是一個接口";
  _this
    .$http({
      method: "POST",
      async: true,
      url: sorting,
      data: datecount
    })
    .then(
      function(res) {
        if (res.data.success) {
          _this.$message.success("成功");
          // _this.onSubmit();
        } else {
          _this.$message.error("失敗");
        }
      },
      function() {
        _this.$message.error("請檢查網(wǎng)絡(luò)連接情況");
      }
    );
  this.$set(_this.editable, index, false);
},
chengenum(row) {
  console.log(row)
  this.$nextTick(function() {
    this.editable[row] = true;
    this.$set(this.editable, row, true);
    setTimeout(
      function () {

    },60);  
  });
},

`
            
            
接下里看效果圖

圖片描述

請輸入代碼

回答

編輯回答

離觴

可以用1樓說的element的事件@blur
也可以用原生的方法加native

2017年11月13日 13:24

編輯回答

挽歌

因為你用了element的input組件，所以你只能用這個組件定義的方法。

2018年5月25日 18:00

編輯回答

深記你

  directives: {
    focus :(el, binding,vode) => {
        let style = el.style
        if(style.display == 'none'){
          // console.log(vode)
        }else{
           let inputs = el.getElementsByTagName('input');
           let input = inputs[0];
           input.focus();
        }
    }
    }

2017年8月26日 04:18