点击elementUI中的popover组件，让组件里的input二次获取焦点有效的两种情况

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

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

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

 1 <el-table-column
 2   prop="assumption"
 3   label="预设"
 4   align="center"
 5   v-if="orderInfo.assumptionShow">
 6   <template slot-scope="scopeAssumption">
 7     <el-popover
 8       popper-class="edit-popover fixed-popover"
 9       placement="bottom"
10       width="200"
11       v-model="scopeAssumption.row.assumptionFlag">
12       <p>系统预设：<span>{{scopeAssumption.row.assumption}}</span></p>
13       <p>正确预设：</p>
14       <input
15         class="edictInput"
16         type="text"
17         v-model="editAssumption"
18         ref="focusAssumptionInput"
19         placeholder="请输入内容"
20         autofocus="autofocus"
21         v-if="scopeAssumption.row.assumptionFlag"/>
22       <div class="edictBtn">
23         <el-button
24           type="primary"
25           size="mini"
26           @click="getEditAssumption(scopeAssumption.row.matchUniqueId)">修改</el-button>
27       </div>
28       <el-button
29         slot="reference"
30         type="text"
31         size="small"
32         :disabled="!scopeAssumption.row.score || printFlag!==1"
33         @click="showAssumptiondsPopover(scopeAssumption.row.matchUniqueId)">[{{scopeAssumption.row.assumption}}]</el-button>
34     </el-popover>
35   </template>
36 </el-table-column>

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代码：

<el-table-column label="投注项" width="300" align="center">
  <template slot-scope="scope">
    <span>{{scope.row.subPlayTypeWord}}</span>
    <el-popover
      popper-class="edit-popover fixed-popover"
      v-for="(item1, index1) in scope.row.betItemsObj"
      :key="index1"
      trigger="click"
      placement="bottom"
      width="200"
      v-model="item1.flag">
      <p>系统赔率：<span>{{item1.odds}}</span></p>
      <p>正确赔率：</p>
      <input
        class="edictInput"
        autofocus="autofocus"
        type="text"
        v-model="editOdds"
        ref="focusOddsInput"
        placeholder="请输入正确赔率"/>
      <div class="edictBtn">
        <button
          :ref="scope.row.matchUniqueId"
          :data-idx="index1"
          :data-row="JSON.stringify(scope.row)"
          :data-odd="item1.odds"
          @click="getEditOdds(scope.row, index1, item1.odds)">修改</button>
      </div>
      <el-button
        slot="reference"
        type="text"
        size="small"
        @click="showOddsPopover(scope.row, item1.odds, index1)"
        :disabled="printFlag!==1">[{{item1.key}}&nbsp;({{item1.odds}})]</el-button>
    </el-popover>
  </template>
</el-table-column>

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 = true
13             this.oddIndex = index
14             this.oddIndexNum = index1
15           }
16         })
17       })
18       // 赔率输入框获取焦点
19       for (let i = 0; i < len; i++) {
20         this.$nextTick(() => {
21           this.$refs.focusOddsInput[i].focus()
22         })
23       }
24     }