关于element-ui popover组件通过数据渲染出多个popover时点击取消时 popover的显示与隐藏问题

关于element-ui popover组件通过数据渲染出多个popover时点击取消时 popover的显示与隐藏问题

废话不多说直接上代码

              <template slot-scope="scope">
                <el-button @click="editRowData(scope.row)" type="primary" size="mini"
                  class="el-icon-edit" ></el-button>
                <!-- <el-button type="danger" size="mini" class="el-icon-delete"></el-button> -->
                <el-popover placement="top" width="150" :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="delBtnRowData(scope,scope.row)">确定</el-button>
                  </div>
                  <el-button style="margin: 8px " slot="reference" type="danger" size="mini" class="el-icon-delete"></el-button>
                </el-popover>
              </template>

**在el-popover中

加属性 :ref="`popover-${scope.$index}`" 

取消el-button按钮加

@click="scope._self.$refs[`popover-${scope.$index}`].doClose()"

轻松解决**

以上内容来自网络 但是本人亲测 如有侵权联系删除