携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
最近在改前端代码，整体的难度倒不是很大，因为组里已经有完整的前端项目，也有很多自己的组件我可以直接拿过来用，关键就是一些样式上的修饰以及一些小细节。正好前端时间组长看过我画的页面后，提了个优化意见，最近才改好，记录一下。
需求
如上图，整体是一个表格，也就是 el-table。重点在最右侧，有一列“操作”列，这一列可以对每一行的数据进行修改。点击操作列中的每一行对应的单元格，就会弹出一个 popover，popover 中会有两个按钮，至于这两个按钮繁琐不繁琐，合理不合理暂且不谈。问题就是，我之前的实现效果是，点击单元格弹出 popover 后，点击“修改”或“保存”任意一个按钮，popover 并不会自动消失，还需要鼠标再任意点击其他地方，popover 才会消失。需求就是点击 popover 内的按钮后，popover 能够自动隐藏。
思路
我最开始的想法就是，既然时间点是在点击 popover 内的按钮之后，那么一定是在这两个按钮的点击事件内加上一些操作，这些操作就是让 popover 隐藏。关键就是这些操作是什么？
解决方法
首先在 el-popover 中要加上下面这条属性
:res="`popover-${scope.$index}`"
这行设置，分开来看，后面的scope.$index的意思是，获取每行的下标，index；再结合前面的部分，整体的意思就是给 el-popover 分配一个唯一的 ref；然后在需要关闭 popover 的地方，通过这个唯一的ref调用doClose()方法即可，具体写法如下：
scope._self.$refs[scope.$index].doClose()
结合前文分析，这行关闭 popover 的操作需要写在点击“修改”、“保存”的click事件方法中，同时注意方法要传以上提到的scope。
以上，算是自己解决了一个比较生疏的问题，感觉值得记录，虽然过程中也有‘百度’ -_-
希望本文章能够帮助到你，如有错误，望指正！
我向你敬礼啊，Salute！
