vue自定义指令实现element中input 自动获取焦点

项目的一个需求，记录分享一下，希望帮助别人少踩坑。先简单说一下需求：左侧是tree结构，右侧是表单，实现功能就是点击tree节点，对应的右侧input获取焦点

 

注册自定义指令

　　指令可以是全局注册也可以是局部注册，看你自己的想法喽，我这块是实现的全局注册

　　

  directives: {
    focus: {
      // 绑定判断
      inserted: function(el, { value }) {
        if (value) {
          el.children[0].focus();
        }
      },
      //更新判断
      update: function(el, { value }) {
        if (value) {
          el.children[0].focus();
        }
      },
      //更新完成s
      componentUpdated: function(el, { value }) {}
    }
  }

　　！！！非常重点的就是el.children[0]。具体看图

　　

　　我觉得大家应该明白了，为啥是第一个子元素了，因为element渲染后，结构是div包着input，你的指令给div是没有任何效果滴。需要注意这块

　　逻辑代码

　　光指令了，没有逻辑代码也是不行滴啊，我就顺便贴出来吧，反正也不费事请。（保证指令的正常更新，每次只有一个input选中）

　　

  updateFocusStatus(id) {
      let _this = this;
      let children = _this.data[0].children;

      if (children[id].focus) {
        children[id].focus = !children[id].focus;
        return;
      }

      children.map(n => {
        n.id != id ? (n.focus = false) : (n.focus = true);
      });
    },
    handleNodeClick(data) {
      let _this = this;
      console.log(data.id + ":" + data.focus);
      _this.updateFocusStatus(data.id);
    }

　　结尾：希望自己每天都可以进步一点点。努力！