Vue使用ElementUI的确认框进行删除操作(包含前后端代码)

<template>
  <el-button type="danger" @click="handleDelete">删除</el-button>
</template>
 
<script>
export default {
  props: {
    // 从父组件接收的数据，例如id
    dataId: {
      type: String,
      required: true
    }
  },
  methods: {
    handleDelete() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发起删除请求
        this.$http.delete(`/api/data/${this.dataId}`).then(response => {
          if (response.status === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            // 删除成功后的操作，例如刷新列表
            this.$emit('refresh');
          }
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '删除失败: ' + error.message
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

这段代码展示了如何在Vue中使用ElementUI的确认框组件来执行删除操作。它包括了发送删除请求到后端API的逻辑，并在删除成功或失败后给出相应的用户提示。