點擊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()
        })
      }
    }