关于element ui中autofocus属性失效的问题

1丶需求
进入页面默认选中其中一个按钮,当跳转到其他页面返回的时候默认选中之前选中的按钮

于是马上就想到了element ui中的autofocus属性,

添加,然后就发现以下报错,自动对焦被阻止,果然是没那么简单


嗯?被阻止了
不慌,手动触发来一手
这里就不得不提一个很厉害的东西,自定义指令vue中directives,详情请看官方文档-自定义指令
然后你就会看到这样一段代码

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

directives与生命周期函数同级,所以复制,然后在想要的标签上加上v-focus即可,值得一提的是inserted
每次进入页面的时候都会默认选中

到这里你如果你只有一个需要默认获取的焦点或者按钮,其实就已经可以了,但这,这儿有三个,在往上加
v-focus?
那他只会默认选中最后一个,结合之前从别的页面返回需要保持选中状态,那我给他加了判断属性

//声明一个属性
data(){
	numType:''
}

那我点击按钮的时候,让nunType分别为1,2,3,依次来判断属性

 //中国移动
    chinaMove() {
      this.numType = 1
      sessionStorage.setItem('numbell',this.numType)
      this.getList()
    },

拿到numType的值,然后存到sessionSstorage中,然后再通过numType的值来判断button按钮属性上是否有v-focus,因为之前说过了,多个v-focus存在之选渲染最后一个
所以

 <el-button @click="chinaMove" v-if="numbell == 1" v-focus plain size="small">中国移动</el-button>
 <el-button @click="chinaMove" v-else  plain size="small">中国移动</el-button>

一直觉得这种方法不是最佳,希望有大佬能给出最佳方法
最后就是在create中来判断点击那个按钮的问题了

    if (sessionStorage.getItem('numbell') == 3 ) {
       this.chinaTelecom()
      return
    } else if (sessionStorage.getItem('numbell') == 2 ) {
      this.chinaOpera()
      return
    } else {
     this.chinaMove()
    }

直接去sessionStorage里面取,如果没有取得就默认第一个
到这里默认选中的需求已经完成了