关于Vue的获取焦点的问题,失去之后保存的一个效果.

Question

采用的框架是vue+Element-UI,
现在遇到的问题是在一个表格里面,有一项是等级的表格.
点击当前的单元格input标签显示并且获取焦点,改变数值之后失去焦点保存数据,input隐藏,
vue官网上有个自定义指令,是用来获取焦点的.但是貌似在我这里不管用,看看各位还有其他的方法么.接下来看代码吧!

`

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

`
            
            
接下里看效果图

请输入代码

Answer 1

因为你用了element的input组件，所以你只能用这个组件定义的方法。

Answer 2

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

Answer 3

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