element ui popover嵌套操作在table和for循环中的使用

以上是官方文档，但问题在于官方的示例中 popover v-model 绑定了一个值，但如果是v-for 渲染多个 popover 就无法同时绑定多个了。所以导致 popover 组件无法正常使用。

 

解决方法

既然使用 v-for 渲染多个popover无法绑定 v-model，那么就不用 v-model 去控制popover

在 popover 组件上 存在 doClose() 方法，只要我们为每个popover设置独一无二的的 ref，我们就可以通过 this.$refs 去找到对应的popover，并调用它的 doClose();

<el-table-column label="操作" align="center" width="180">
  <template slot-scope="scope">
    <el-button @click="edit(scope)" class="editBtn" size="mini">编辑</el-button>
    <el-popover
      style="margin-left: 10px"
      placement="top"
      width="160"
      :ref="`popover-${scope.$index}`">
      <p>这是一段内容这是一段内容确定删除吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">取消</el-button>
        <el-button type="primary" size="mini" @click="del(scope.row, scope.$index,scope)">确定</el-button>
      </div>
      <el-button slot="reference"  size="mini" type="danger">删除</el-button>
    </el-popover>
  </template>
</el-table-column>

重点在于：

<el-popover  :ref="`popover-${scope.$index}`">

<el-button @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">取消</el-button>

而在普通的for循环中：

<li v-for="(item, index) in list" :key="item.id">
               
   <i class="el-icon-edit" @click="edit(item, index)"></i>

   <el-popover placement="bottom-end" :ref="`popover-${item._id}`">
        <p>确定删除吗？</p>
        <div style="text-align: right; ">
            <el-button size="mini" type="text" @click="$refs[`popover-${item._id}`][0].doClose()">取消</el-button>
             <el-button type="primary" size="mini" @click="del(index, item._id)">确定</el-button>
          </div>
          <i class="el-icon-delete" slot="reference"></i>
     </el-popover>                    
                 
</li>