Element-ui Popconfirm气泡确认框的确认及取消事件不生效

这篇具有很好参考价值的文章主要介绍了Element-ui Popconfirm气泡确认框的确认及取消事件不生效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Element-ui 官方文档对 Popconfirm气泡确认框的一些属性及事件的描述不够详细,导致第一次使用时会遇到各种各样的问题 对确定事件及取消事件描述如下:

但是如果给组件绑定@confirm="confirm"时,发现点击确定按钮时,并不能触发confirm事件. 实际应该绑定的是onConfirm事件和onCancel事件文章来源地址https://www.toymoban.com/news/detail-536598.html

              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                title="确定删除吗?"
                icon="el-icon-delete"
                icon-color="red"
                @onConfirm="handleConfirm"
                @onCancel="handleCancel"
                :key="scope.row.id"
              >
                <el-button
                  slot="reference"
                  size="medium"
                  type="text"
                  style="color: #fd6d60"
                  >删除
                </el-button>
              </el-popconfirm>

到了这里,关于Element-ui Popconfirm气泡确认框的确认及取消事件不生效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决element-ui组件库中dialog组件只显示遮罩层,未显示弹框的问题

    以下是直接粘贴的组件--基础用法 el-button type=\\\"text\\\" @click=\\\"dialogVisible = true\\\"点击打开 Dialog/el-button el-dialog   title=\\\"提示\\\"   :visible.sync=\\\"dialogVisible\\\"   width=\\\"30%\\\"   :before-close=\\\"handleClose\\\"   span这是一段信息/span   span slot=\\\"footer\\\" class=\\\"dialog-footer\\\"     el-button @click=\\\"dialogVisible = false\\\"取 消

    2024年02月03日
    浏览(83)
  • element-ui tree树形结构全选、取消全选,展开收起

    控制树形结构全选、取消全选,展开收起

    2024年01月17日
    浏览(50)
  • element-ui中 this.$confirm修改确定取消按钮顺序和样式

    首先其他博客上说是给 this.$confirm中添加取消样式,我试过了无效

    2024年02月14日
    浏览(39)
  • vue脚手架创建项目:账号登录(利用element-ui快速开发)(取消eslint强制格式)(修改端口号)

    新手看不懂,老手不用看系列 创建好项目以后,可以利用idea等工具打开项目。 file - open 然后选择创建好项目文件夹,信任该项目 然后打开 .vue 后缀的文件需要下载一个插件 就是把eslint这个相关的配置删除掉(注意保持JSON格式) 点 terminal 打开命令行输入 npm install element-u

    2024年04月28日
    浏览(58)
  • Vue3弹出确认(Popconfirm)

    参数 说明 类型 默认值 必传 title 确认框的标题 string | slot ‘’ false description 确认框的内容描述 string | slot ‘’ false content 展示的文本 string | slot ‘’ false icon 自定义弹出确认框 Icon 图标 string | slot ‘’ false iconType 弹出确认框 Icon 图标类型 ‘success’ | ‘info’ | ‘warn’ | ‘

    2024年02月13日
    浏览(33)
  • element UI中loading加载框的花式用法

    前言:           前端为了优化体验效果必不可少的就是加载框loading的使用。接口是异步的,获取数据是需要时间的,万一网络再卡顿下,总不能让用户干等着没数据的页面。那loading就必不可少了! 一.   常规使用(进入页面加载使用,针对某一部分,比如页面中的表格

    2024年02月10日
    浏览(51)
  • Element ui 改变el-transfer 穿梭框的大小

    修改el-transfer 左右两个穿梭框的高度和宽度,具体效果如下 正常大小的穿梭框 修改之后的,主要在style中加上如下样式即可 全部代码如下:

    2024年02月02日
    浏览(43)
  • Element UI自定义被禁用(disabled)的单选框的样式

    在Element UI中,如果你想自定义被禁用(disabled)的单选框的样式,可以使用以下步骤: 1.使用 ::v-deep 或 /deep/ 选择器:  这样可以更改被禁用单选框的样式。 2.定义样式: 通过定义选择器来修改禁用状态下单选框的外观。以下是一些可能的CSS属性可以自定义: 确保在你的项目中

    2024年02月04日
    浏览(48)
  • vue+Element UI 实现动态表单(点击按钮增删表格及嵌套输入框的增删)(1)

    el-button size=“small” @click=“addTable”新增 el-button size=“small” @click=“delTable”删除 el-table ref=“table” :data=“tableDataBind.taAssessltems” tooltip-effect=“dark” border @selection-change=“selectRow” 规格: 重量: 数量: 加工费: el-button size=“mini” type=“primary” icon=“el-icon-circle-plus-ou

    2024年04月13日
    浏览(43)
  • 基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框

    场景:因为有个需求就是鼠标经过可多选的 el-select 选择器时,需要有个气泡框显示已选的内容,其实 el-tooltip 气泡框可以满足需求,就是用 el-tooltip 气泡框来包裹 el-select 选择器,但是当选择器一个也没选中,即内容为空时不应该也显示气泡框,有点影响美观。应该就是若内

    2024年02月13日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包