【elementui】el-popover在列表里循环使用,取消的doClose无效解决办法

目录

一、需求效果

在使用elementui的Popover 弹出框时,需求是在table列表里使用,循环出来,无法取消。

二、代码详情

html

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-popover
                v-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-popover
                v-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>

方法

javascript 复制代码
    handleClick(val) {
      document.body.click()
    },
javascript 复制代码
    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无效解决办法

相关推荐
yanlele13 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮19 分钟前
【无标题】
开发语言·前端·javascript
谦行30 分钟前
深度神经网络训练过程与常见概念
前端
Simon_He1 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军2 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子2 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游2 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能