vue element ui input 自动获取焦点（解决只有第一次起作用问题，autofocus失效问题解决）

原因：

autofocus是vue中input的原生属性,element也支持这种方法,
但是element中的el-input组件外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法来聚集。

解决方案：

借助动态绑定ref属性，在this.$nextTick调用focus()方法。

在线运行

<div id="app">
  <div v-for="(item,i) in data">
    {{item.id}}.{{item.text}}
    <el-input v-show="item.edit"
      type="text"
      placeholder="请输入内容"
      v-model="item.text"
     :ref="'input'+ item.id "
    >
    </el-input>
     <button @click="edit(item)">编辑</button>
<div>
</div>

//js部分
var Main = {
  data() {
    return {
      data:[
        {
          id:1,
          edit:false,
          text:"22"
        },
         {
          id:2,
          edit:false,
          text:"33"
        }
      ]
    }
  },
  methods:{
    edit(item){
      this.data.map((item1)=>{
        if(item1.id==item.id){
          item1.edit=!item1.edit;
          this.$nextTick(()=>{  //主要代码
          let id = 'input'+item.id;
          this.$refs[id][0].focus();
         })
        }
      })
    }
  }
}
var Ctor = Vue.extend(Main) //如果在vue-cli里就不用写
new Ctor().$mount('#app')//如果在vue-cli里就不用写

补充问题：

1.关于打印this.$refs 有的情况是组件实例 有的时候是数组

这是vue的特性,自动把v-for里面的ref展开成数组的形式.

假设你的ref不是动态的,而是静态的 ， ref="a"，

那么不管你执行多少次循环,最后ref只会有一个值,

所以vue为了处理这种情况会把v-for里ref

转为数组形式，为了能捕捉所有的ref值.