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

相关推荐
weixin-a1530030831614 分钟前
vue疑难解答
前端·javascript·vue.js
Bellafu6663 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird6 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者7 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强7 小时前
Chrome和IE获取本机ip地址
前端
天***88967 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*7 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls7 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友7 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵8 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构