当前位置：首页 > 前端教程

elementui deletetip

2026-03-06 00:02:59前端教程

删除确认提示（DeleteTip）的实现方法

Element UI 提供了一套基于 el-popconfirm 或 MessageBox 的删除确认方案，适用于表格操作或其他需要二次确认的场景。

使用 el-popconfirm 组件

<el-popconfirm
  title="确认删除吗？"
  @confirm="handleDelete(row.id)"
>
  <template #reference>
    <el-button type="danger" size="small">删除</el-button>
  </template>
</el-popconfirm>

使用 MessageBox 弹窗

methods: {
  handleDelete(id) {
    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 调用删除API
      deleteItem(id).then(() => {
        this.$message.success('删除成功');
      });
    }).catch(() => {
      this.$message.info('已取消删除');
    });
  }
}

自定义提示内容

可通过 message 属性自定义提示文字：

<el-popconfirm
  title="确定要删除这个项目吗？"
  confirm-button-text="好的"
  cancel-button-text="不用了"
  icon="el-icon-warning"
  icon-color="red"
  @confirm="handleConfirm"
>
  <el-button slot="reference">删除</el-button>
</el-popconfirm>

与表格行数据绑定

在 el-table 中结合作用域插槽实现行级删除：

<el-table-column label="操作">
  <template #default="scope">
    <el-popconfirm title="确认删除这条记录？" @confirm="deleteRow(scope.$index)">
      <template #reference>
        <el-button type="text" size="small">删除</el-button>
      </template>
    </el-popconfirm>
  </template>
</el-table-column>