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

相关推荐
Dolphin_海豚14 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件17 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易1 小时前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
markyankee1011 小时前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
ma771 小时前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在1 小时前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac