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

相关推荐
北城以北8888几秒前
ES6(二)
前端·javascript·es6
科兴第一吴彦祖几秒前
基于Spring Boot + Vue 3的乡村振兴综合服务平台
java·vue.js·人工智能·spring boot·推荐算法
朕的剑还未配妥14 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端
墨鱼鱼19 分钟前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
携欢22 分钟前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
什么芋泥香蕉33030 分钟前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦31 分钟前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt
qq_18417767738 分钟前
前端自动部署项目到服务器
服务器·前端·javascript
非凡ghost40 分钟前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求
C2X1 小时前
Vue3.0 学习总结
前端