我晒干了沉默，后悔的很冲动：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控制显示或者隐藏

 
              
                
                
              
              

                取消
                确定
              
            

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

参考

el-table 中使用 el-popover 点击取消按钮时 popover 框的显示与隐藏问题 - 简书 (jianshu.com)