在使用elementUI时，点击table组件中的某个单元格，会弹出一个popover，并且popover中包含input输入框，如果只是给input添加autofocus属性是没有效果的。当然这里也是分两种情况。

第一：点击table组件中的一个单元格，弹出一个popover。

HTML代码：（equipment项目，orderList页面）

1 
     
       6   
      36 
     

js代码

// 打开修改预设值的弹出框    showAssumptiondsPopover (matchUniqueId) {      this.editAssumption = ''      this.hoverData.map((item, index) => {        this.$set(item, 'assumptionFlag', false)        if (item.matchUniqueId === matchUniqueId) {          this.$set(item, 'assumptionFlag', true)          this.keyAssumptionFalg = true          this.AssumptionIndex = index        }      })      this.$nextTick(() => {        this.$refs.focusAssumptionInput.focus()      })

说明：使用原生属性autofocus 只在模板加载完成时起作用，也就是说只有第一次有用。而使用element UI的组件是通过v-show控制的，所以通过将input输入框的显示控制跟popover组件的显示一致，就能解决了。当然，同时还需要通过Vue中的$nextTick方法，等元素渲染完成后执行该回调方法，这样子focus才有效果。

 

 

 

这里生成的唯一popover方法暂时不讲，下次再说。

第二：table中的单元格中有多个按钮，遍历生成popover。

HTML代码：

js代码：

1 // 打开修改赔率的弹出框 2     showOddsPopover (rows, odds, editIndex) { 3       this.editOdds = '' 4       let len = 0 5       this.hoverData.map((item, index) => { 6         len += item.betItemsObj.length 7         item.betItemsObj.map((item1, index1) => { 8           this.$set(item1, 'flag', false) 9           // 展开对应赔率修改框10           if (item.matchUniqueId === rows.matchUniqueId && (index1 === editIndex) && (item1.odds === odds)) {11             this.$set(item1, 'flag', true)12             this.keyOddFalg = true13             this.oddIndex = index14             this.oddIndexNum = index115           }16         })17       })18       // 赔率输入框获取焦点19       for (let i = 0; i < len; i++) {20         this.$nextTick(() => {21           this.$refs.focusOddsInput[i].focus()22         })23       }24     }