el-popover或el-popconfirm中button不展示问题

vue3在使用Element-plus 2.X时,出现el-popover或el-popconfirm中button不展示问题。

正常效果:

第一种错误原因:el-button没有添加 slot='reference'

<template slot-scope="scope">
	<el-popconfirm title="您确定删除吗?" @onConfirm="cancelOrder(scope.row.id)">
	    <el-button >删除</el-button>
	</el-popconfirm>
</template>

第二种错误方式: 添加 slot='reference'  还是不展示,没想到吧!!!!!2.3.9官网就是这么写的啊

<el-popover
        placement="top"
        width="200"
        v-model="scope.row.visible">
    <p>确定删除吗?</p>
    <div style="text-align: right; margin: 0">
        <el-button type="text" @click="scope.row.visible= false">取消</el-button>
        <el-button type="text" @click="delete(scope.row.id)">确定</el-button>
    </div>
    <el-button slot="reference">删除</el-button>
</el-popover>

正确方式:

<el-popover
        placement="top"
        width="200"
        v-model="scope.row.visible">
    <p>确定删除吗?</p>
    <div style="text-align: right; margin: 0">
        <el-button type="text" @click="scope.row.visible= false">取消</el-button>
        <el-button type="text" @click="delete(scope.row.id)">确定</el-button>
    </div>
    <template #reference>
        <el-button >删除</el-button>
    </template>
</el-popover>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将el-popconfirm放入el-popover使用,可以按照以下步骤进行操作: 1. 首先,在需要使用el-popover的地方添加el-popover组件,并设置相应的属性,例如触发方式、内容等。 2. 在el-popover的内容,添加el-popconfirm组件,并设置相应的属性,例如标题、确认按钮文本等。 3. 在el-popconfirm,可以使用el-button等组件作为触发按钮,点击触发按钮时会显示确认框。 4. 在确认按钮的点击事件,可以执行相应的逻辑操作。 下面是一个示例代码,演示了如何将el-popconfirm放入el-popover使用: ```html <template> <div> <el-popover placement="top" title="Popover Title" trigger="click" content="Popover Content" > <el-button type="primary">Click me</el-button> <template slot="reference"> <el-popconfirm title="Are you sure to delete?" confirm-button-text="Yes" cancel-button-text="No" @confirm="handleConfirm" > <el-button type="danger">Delete</el-button> </el-popconfirm> </template> </el-popover> </div> </template> <script> export default { methods: { handleConfirm() { // 执行删除操作 console.log("Delete confirmed"); }, }, }; </script> ``` 在上述示例,点击"Click me"按钮会触发el-popover的显示,同时在popover显示了一个"Delete"按钮。当点击"Delete"按钮时,会弹出确认框,点击确认按钮会执行`handleConfirm`方法,输出"Delete confirmed"。 希望以上信息能够帮助到你!如果有任何疑问,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值