Vue中多popover点击子组件取消按钮没有

修改前Bug代码

<el-table-column label="操作2" width="200px" align="center">
        <template slot-scope="scope">
          <edit v-if="checkPermission(['ADMIN'])" :data="scope.row" :sup_this="sup_this"/>
          <el-popover
            v-if="checkPermission(['ADMIN'])"
            :ref="scope.row.id"
            placement="top"
            width="180">
            <p>确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
            </div>
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="重置设备" width="100px" align="center">
        <template slot-scope="scope">
          <el-popover
            v-if="checkPermission(['ADMIN'])"
            :ref="scope.row.id"
            placement="top"
            width="180">
            <p>确定重置吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button :loading="delLoading" type="primary" size="mini" @click="subRetting(scope.row.id)">确定</el-button>
            </div>
            <el-button slot="reference" type="danger" size="mini">重置</el-button>
          </el-popover>
        </template>
      </el-table-column>

Bug问题

• 官方文档中的popover只是针对的单个的情况，像table这种循环渲染popover的情况如果照搬会死的惨绝人寰，第一个“确定删除吗？”标签的取消按钮没用 弹出框出来后点击取消按钮不管用。官方介绍的方法只适用于有一个popover组件的情况下

解决方法

• 搭配el-popover的内置方法 doClose 通过引用popover对象然后调用doClose方法

修改后代码

• 由于问题是两个消息提示窗的:ref是重复的，因此，我将第一个提示窗的:ref属性改为了scope.row.id-1，方法有点野，不知道以后会不会出Bug。

参考文章

原理理解