With regard to the problem of getting focus on Vue, a saved effect is lost.

uses the frame is vue+Element-UI,
now encounters the problem is in a table, there is a grade table.
Click the current cell input tag to display and get focus, change the value after losing focus to save data, input hide,
vue official website has a custom instruction, is used to get focus. But it doesn"t seem to work for me. Let"s see if there are any other ways. Let"s look at the code next!

`

                <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("");
      }
    );
  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);  
  });
},

`
            
            




because you use the input component of element, you can only use the methods defined by this component.

clipboard.png


  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();
        }
    }
    }

you can use the event @ blur
of element on the first floor, or you can add native

by native method.
Menu