在el-table中嵌套使用el-popover的坑与两种解决方案(v-model显示失效)

使用出现的问题

根据element-ui文档与网上教程编写如下代码

<el-popover
 v-model="row.visible"
 trigger="click"
>
<span slot="reference" @click="row.visible=!row.visible">删除</span>
</el-popover>

常规情况下，row中的visible属性会发生改变，但通过调试发现row属性并未改变，查看源码


所以<span slot="reference" @click="row.visible=!row.visible">删除</span>中的click事件会出现冲突问题

解决方案

1. 使用表格的行绑定的visible属性
   直接去掉<span slot="reference" @click="row.visible=!row.visible">删除</span>该行代码中的click方法，row中的visible属性就能照常改变
2. 直接给popover绑定ref+改变DOM元素上的showPopper属性

<el-popover
   placement="top"
   width="280"
   height="144"
   :ref="`popover-${row.priority}`" //绑定唯一值
>
  <div class="ip-popover-content__btns">
    <el-button @click="cancel(row)">取消</el-button>
    <el-button type="primary">确定</el-button>
  </div>
</el-popover>

cancel(row) {
  this.$refs["popover-" + row.priority].showPopper = false;
},