vue-elementUI 踩坑之多个 Popover

问题描述
使用 ElementUI 的 el-popover 时，当存在多个 Popover 时或将 Popover 放入到表格中后，点击确定或者取消该 over 不消失的问题
如图所示：

<el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
  <template slot-scope="scope">
    <el-button  size="small" type="primary" @click="handleUpdate(scope.row)">编辑
    </el-button>
    <el-button  size="small" type="primary" @click="handleResult(scope.row)">查看结果
    </el-button>
    <el-popover ref="delpopover" placement="top" width="160" v-model="scope.row.delConfirmvisible">
      <p>确定删除吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="scope.row.delConfirmvisible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="handleDelete(scope.row)">确定</el-button>
      </div>
    </el-popover>
    <el-button size="small" type="danger" v-popover:delpopover >删除</el-button>
  </template>
</el-table-column>

点击取消的方法是

scope.row.delConfirmvisible = false

这个取消的方法是没有立即渲染的（即 popover 没有消失），这是因为vue 深入理解响应式原理，Vue 的官方文档其实也说明过，对于一个数组或者对象，直接去改变某个属性对应的值，虽然值是成功修改了，但是这种变动是无法反应到视图上的。
问题解决
于是，此时需要用数组的 splice 方法或者 vue 自带的 this.$set 方法。修改如下：

其中 scope.$index 是表格中每行数据的索引，delVisibles 是我新定义的一个数组，因为和 popover 绑定，其默认值是 false（不管 scope 表格数据有没有这个属性）

delVisibles: []

取消方法如下：

canclePopover(row, index){
  this.delVisibles.splice(index, 1, false);
  
  this.$set(this.delVisibles, index, false);
}

转载：https://www.dazhuanlan.com/rms/topics/1524382
如有侵权，请联系qq191221098