el-tooltip和el-popconfirm一起使用的方法

背景：

已经用el-tooltip来包裹el-button了，此时想弹出一个pop对话框，发现加了el-popconfirm组件后，不仅没有出现对话框，并且原来的按钮也消失了。

原来代码：

<el-tooltip effect="light" content="删除spu" placement="top">
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSpu(row)"></el-button>
 </el-tooltip> 

解决代码：

el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="deleteSpu(row)">
                  <template #reference>
                    <!-- <div> -->
                      <el-tooltip effect="light" content="删除spu" placement="top">
                        <el-button type="danger" icon="el-icon-delete" size="mini" style="margin-left:10px"></el-button>
                      </el-tooltip>
                    <!-- </div> -->
                  </template>
                </el-popconfirm>

总结：

组件el-popconfirm嵌套在外层后，要添加template标签，且必须添加关键的reference，div标签随意。