要让按钮不消失并且改变名称,可以将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-ifv-else分别控制了两个el-popconfirm组件的显示与隐藏。当scope.row.enable的值为0时,显示停用按钮;当scope.row.enable的值为1时,显示启用按钮。这样就可以根据状态改变按钮的名称并且保持按钮的显示


原文地址: https://www.cveoy.top/t/topic/izQq 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录