element-ui中input组件的autofocus属性失效问题

1、问题
在vue项目中，使用element-ui中input组件的autofocus属性失效
2、原因
autofocus是vue中input的原生属性,element也支持这种方法,
但是如果el-input组件外面还有其他组件, 就会导致autofocus失效。
3、解决办法
方法（1）：
可在全局定义自动获得焦点的自定义指令，之后在所有单文件组件中都可使用v-focus使用该全局自定义指令，代码如下：
a、在main.js中定义全局指令：

Vue.directive('focus',{
    inserted:function(el){
        el.querySelector('input').focus()
    }
})

注意：要使用el.querySelector(‘input’)取得input DOM元素

b、使用自定义指令：

<el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryParams.query" clearable @clear="getGoodsList" v-focus>
            <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
          </el-input>
</el-col>

方法（2）：
a、使用ref="inputRef"在此单文件组件中引用input组件的原生DOM元素input，代码如下：

<el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryParams.query" clearable @clear="getGoodsList" ref="inputRef">
            <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
          </el-input>
</el-col>

b、再在此单文件组件在加载时，让文本框自动获得焦点

created() {
// 在input输入框被渲染完毕后再获取焦点
    this.$nextTick(()=>{
    // 使用引用的原生DOM对象input的focus方法自动获得焦点
       this.$refs.inputRef.focus()
    })
}

推荐使用方法（1）：全局自定义组件，所有单文件组件都可使用，简单方便