el-popconfirm v-if=scoperowenable === 0 width=220 confirm-button-text=确定 cancel-button-text=取消 title=现在是0正常改成停用1吗? confirm=handleStatusscoperow template #reference
要让按钮不消失并且改变名称,可以将el-popconfirm组件放在一个容器元素中,然后在el-popconfirm组件外部使用v-if控制容器元素的显示与隐藏。
以下是示例代码:
<template>
<div>
<el-popconfirm v-if="scope.row.enable === 0" width="220" confirm-button-text="确定" cancel-button-text="取消"
title="现在是0正常,改成停用1吗?" @confirm="handleStatus(scope.row)">
<template #reference>
<el-button type="primary" size="small" link>
<span>停用</span>
</el-button>
</template>
</el-popconfirm>
<el-popconfirm v-else width="220" confirm-button-text="确定" cancel-button-text="取消"
title="现在是1停用,改成正常0吗?" @confirm="handleStatus(scope.row)">
<template #reference>
<el-button type="primary" size="small" link>
<span>启用</span>
</el-button>
</template>
</el-popconfirm>
</div>
</template>
在上面的代码中,使用v-if和v-else分别控制了两个el-popconfirm组件的显示与隐藏。当scope.row.enable的值为0时,显示停用按钮;当scope.row.enable的值为1时,显示启用按钮。这样就可以根据状态改变按钮的名称并且保持按钮的显示
原文地址: https://www.cveoy.top/t/topic/izQq 著作权归作者所有。请勿转载和采集!