0. 緣起

就el-table裡面表格用一下泡泡彈出框效果，結果發現有三個陰間bug

1. 仿照官網使用v-model="visible"的形式，點選彈出框無效果，但是點選事件是觸發了的。

2. 不使用v-model，直接用el-popover，有個自帶的點選展開，再點選外圍區域關閉的效果。勉強能用，但是和我的設計使用思路：點選關閉或者確認按鈕後關閉彈窗，相沖突。

3. 使用ref+v-model的形式

   和1的問題1毛1樣，彈窗不出現，點選事件觸發

   (如:ref="popover-${scope.$index}")

1. 思索

官網文件如下

trigger屬性用於設定何時觸發 Popover，支援四種觸發方式：hover

，click，focus 和 manual。對於觸發 Popover 的元素，有兩種寫法：使用 slot="reference" 的具名插槽，或使用自定義指令v-popover指向 Popover 的索引ref。

元件 | Element

v-model一直不起作用，v-popover是滑鼠懸浮focus的事件，ref是個什麼東東？

我之前沒想到ref，不過正是這個傢伙自帶關閉事件動作

2. 用法

上直接ref控制顯示或者隱藏

 <el-popover
              width="160"
              title="選擇版本"
              trigger="click"
              :ref="`popover-${scope.$index}`"
            >
              <el-select v-model="versionSelected">
                <el-option
                  v-for="item in versionArr"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <div style="text-align: right; margin-top: 10px">
                <el-button size="mini" @click="handleCancelPop(scope)"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="deliverMagicBox(scope)"
                  >確定</el-button
                >
              </div>
            </el-popover>
 

// Methods
    handleCancelPop(scope) { scope._self.$refs[`popover-${scope.$index}`].doClose();
    },

參考

el-table 中使用 el-popover 點選取消按鈕時 popover 框的顯示與隱藏問題 - 簡書 (jianshu.com)