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

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

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

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

<el-table-column
  prop="assumption"
  label="预设"
  align="center"
  v-if="orderInfo.assumptionShow">
  <template slot-scope="scopeAssumption">
    <el-popover
      popper-class="edit-popover fixed-popover"
      placement="bottom"
      width="200"
      v-model="scopeAssumption.row.assumptionFlag">
      <p>系统预设：<span>{{scopeAssumption.row.assumption}}</span></p>
      <p>正确预设：</p>
      <input
        class="edictInput"
        type="text"
        v-model="editAssumption"
        ref="focusAssumptionInput"
        placeholder="请输入内容"
        autofocus="autofocus"
        v-if="scopeAssumption.row.assumptionFlag"/>
      <div class="edictBtn">
        <el-button
          type="primary"
          size="mini"
          @click="getEditAssumption(scopeAssumption.row.matchUniqueId)">修改</el-button>
      </div>
      <el-button
        slot="reference"
        type="text"
        size="small"
        :disabled="!scopeAssumption.row.score || printFlag!==1"
        @click="showAssumptiondsPopover(scopeAssumption.row.matchUniqueId)">[{{scopeAssumption.row.assumption}}]</el-button>
    </el-popover>
  </template>
</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代码：

// 打开修改赔率的弹出框
    showOddsPopover (rows, odds, editIndex) {
      this.editOdds = ''
      let len = 0
      this.hoverData.map((item, index) => {
        len += item.betItemsObj.length
        item.betItemsObj.map((item1, index1) => {
          this.$set(item1, 'flag', false)
          // 展开对应赔率修改框
          if (item.matchUniqueId === rows.matchUniqueId && (index1 === editIndex) && (item1.odds === odds)) {
            this.$set(item1, 'flag', true)
            this.keyOddFalg = true
            this.oddIndex = index
            this.oddIndexNum = index1
          }
        })
      })
      // 赔率输入框获取焦点
      for (let i = 0; i < len; i++) {
        this.$nextTick(() => {
          this.$refs.focusOddsInput[i].focus()
        })
      }
    }