element ui 中el-table中使用v-if造成组件复用问题---之---el-table 中使用el-popover 无法弹出问题

一、el-popover 需指定唯一ref

 <el-popover
       placement="top"
       title="测试内容"
       trigger="hover"
       :ref="`popover-${scope.$index}`"
       width="300"
 ></el-popover>

保证以上三点就行

1、不能再el-popover上⾯使⽤v-if进⾏显⽰隐藏，应该⽤v-show
2、在每⼀个el-popover上都增加⼀个ref确定每个el-popover都是唯⼀的，
:ref="`node-popover-${scope.row.appversionId}`"
3、使⽤slot="reference"这种⽅式进⾏html的加载

但是为什么是v-show就行具体还不太清楚，请看下文…

本人猜测是：v-if会导致updated生命周期执行，会覆盖上面的v-if的生命周期，导致上次的生命周期后的逻辑触发不了但是是错误的，不管是v-if还是v-show生命周期是一样的

二、v-table下v-if造成组件复用

在v-for或者v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况。而原本这些标签每一个都是独立的，于是需要添加column-key来做区分！
表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，所以，通过column-key去标识一下当前行是唯一的，不许复用就行了

解决办法

1. 在 el-table-column 中加入 :column-key="String(Math.random())"
2. 用v-show替代v-if
3. Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。 <template slot-scope="scope" >　</template> 
4. 加一个key :key="Math.randow()

链接: https://wenku.baidu.com/view/61267ecebbf67c1cfad6195f312b3169a451eaa5.html
链接: https://blog.csdn.net/qq_34907078/article/details/108057574?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-108057574-blog-107656535.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-108057574-blog-107656535.pc_relevant_antiscanv2&utm_relevant_index=2
链接: https://www.jianshu.com/p/4584084a7edc
链接: https://www.cnblogs.com/nuonuo-D/p/9959091.html
链接: https://blog.csdn.net/m0_50441807/article/details/124993811