我晒干了沉默，后悔的很冲动：el-table&el-popover的今生孽缘

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)