一、需求效果

在使用elementui的Popover 彈出框時，需求是在table列表里使用，循環出來，無法取消。

二、代碼詳情

html

 <el-table-column v-if="checkPermission(['admin','user:resetPass','user:edit','user:del'])" label="操作" width="200" align="center" fixed="right"><template slot-scope="scope"><el-popoverv-permission="['admin','user:resetPass']":ref="scope.row.id"placement="top"width="180"><p>確定重置密碼嗎？</p><div style="text-align: right; margin: 0"><el-button size="mini" type="text" @click="handleClick()">取消</el-button><el-button type="primary" size="mini" @click="subResetPass(scope.row)">確定</el-button></div><el-button slot="reference" type="primary" icon="el-icon-key" size="mini"/></el-popover><el-button v-permission="['admin','user:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/><el-popoverv-permission="['admin','user:del']":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" icon="el-icon-delete" size="mini"/></el-popover></template></el-table-column>

方法

    handleClick(val) {document.body.click()},

    subResetPass(row) {const params = { userId: row.id }resetPass(params).then(res => {this.$notify({title: '重置成功',message: '默認密碼：123456',type: 'success',duration: 2500})document.body.click()}).catch(err => {document.body.click()console.log(err.response.data.message)})},

接口

export function resetPass(params) {return request({url: 'stbiapi/api/users/resetPass',method: 'get',params})
}

參考文章：el-popover在列表里循環使用，關閉不了???
el-popover 使用 doClose() 關閉窗口不生效
[Vue] element表格中使用el-popover彈窗編輯內容保存和取消的doClose無效解決辦法