起因：
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值.
Vue自身提供了自定义指令的办法
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', function (el) {
el.focus()})
这样使咱们在组件中能够自用的调用v-focus办法，给他绑定定义布尔变量来管制元素是否取得焦点
然而这里要留神的是组件<el-input>自身在页面中渲染成了一个div元素
所以咱们要在<el-input>被绑定为v-focus的同时
在自定义指令中获取组件下通过querySelector()办法获取input元素
<el-input
v-model.trim="searchFor"
@blur="blurSearchFor"
v-focus="blurFocus">
</el-input>
Vue.directive('focus', function (el) {
el.querySelector('input').focus()
})
Vue自身提供了自定义指令的办法2
应用Vue提供的自定义指令来解决，还有一点儿须要留神，el-input在页面渲染后，外层是个div，须要拿到外面的input才会有成果。
<el-input v-focus></el-input>
directives: {
// 注册一个部分的自定义指令 v-focus
focus: {
// 指令的定义inserted: function (el) { // 聚焦元素 el.querySelector('input').focus()}}
},