普歌 -智音团队 Vue用element-ui调用后端API实现删除功能

调用后端接口实现删除功能
1.一般根据id删除

//先把id传入
 deletebanner(id) {
    return request({
      url: `地址 `,
      method: "delete",
    })
  },

2.用自定义插槽做删除按钮

</el-table-column>
<template slot-scope="scope">
      <el-button
        size="mini"
        type="danger"
        //得到当前行的id
        @click="handleDelete(scope.row.id)"
        >删除</el-button
      >
    </template>
  </el-table-column>

3.调用接口

    async handleDelete(id) {
      //   console.log(id, row);
      const confirResult = await this.$confirm(
        "此操作将永久删除轮播图信息，是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => {
        return err;
      });
      //  点击确认返回confirm
      if (confirResult !== "confirm") {
        return this.$message("已取消删除");
      }
      //   console.log(id);
      bannerApi
        .deletebanner(id)
        .then(() => {
          this.$message.success("删除成功");
          this.getBanner();
        })
        .catch(() => {
          this.$message.error("删除失败");
        });
    },

---

相关内容请浏览《普歌-智音团队 Vue用element-ui调用后端API实现添加功能》

---

作者：lihaijin8090
本文源自：lihaijin8090的《普歌 -智音团队 Vue用element-ui调用后端API实现删除功能》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。