【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无效解决办法

相关推荐
然我32 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子37 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹40 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹2 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss