el-popconfirm和el-button标签一起使用不起作用,已解决。

项目需求,在按钮外面加一个气泡确认框,el-popconfirm和但是在el-button标签外面加一个el-popconfirm使用不起作用,已解决。

				<el-popconfirm  title="确定处理为“系统误报”吗?"
				   @confirm="hideStarngerCard(1, item, index)">
                          <el-button type="primary">系统误报</el-button>
                </el-popconfirm >

解决方法是加一个template标签,如下:

				<el-popconfirm  title="确定处理为“系统误报”吗?"
				   @confirm="hideStarngerCard(1, item, index)">
                      <template #reference>
                          <el-button type="primary">系统误报</el-button>
                      </template >
                </el-popconfirm >

总结:组件el-popconfirm嵌套在外层后,要添加template标签,且必须添加关键的reference,div标签随意。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-popconfirmelement-ui中的一个组件,用于在用户执行某个操作时进行确认提示。而el-radio是element-ui中的单选框组件。 要实现el-popconfirm内嵌el-radio,可以将el-radio作为el-popconfirm的内容插槽(slot)的一部分。这样,在用户点击确认按钮时,可以获取el-radio组件的选中值,从而实现更复杂的操作。具体的代码示例如下所示: <el-popconfirm title="确认要执行操作吗?" confirmButtonText="确定" cancelButtonText="取消" @confirm="handleConfirm" > <el-radio-group v-model="radioValue"> <el-radio :label="1">选项1</el-radio> <el-radio :label="2">选项2</el-radio> <el-radio :label="3">选项3</el-radio> </el-radio-group> </el-popconfirm> 在上述代码中,el-popconfirm的title属性设置了确认提示的文本内容,confirmButtonText和cancelButtonText属性分别设置了确认按钮和取消按钮的文本内容。@confirm事件绑定了一个名为handleConfirm的方法,该方法会在用户点击确认按钮时触发。 el-radio-group组件绑定了一个名为radioValue的v-model,用于双向绑定选中的值。el-radio组件的label属性设置了各个选项的值。 通过这样的方式,el-popconfirmel-radio可以实现内嵌的效果,当用户点击确认按钮时,可以在handleConfirm方法中获取到el-radio选中的值,从而进行相应的操作。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [el-drawer的入门学习](https://blog.csdn.net/qq_40765784/article/details/126464517)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [elementUi vue el-radio 监听选中变化的实例代码](https://download.csdn.net/download/weixin_38674223/12940007)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值