谷粒商城day37 -商品服务-API-三级分类- 分类删除细化

上一节简单实现了商品分类的逻辑删除,这一节,进行细节完善,内容包括如下

1.删除提示框  2.删除后刷新分类列表 3.删除后展示当前层级分类列表,以让直观看到分类被删除

 

1.按钮绑定删除方法

谷粒商城day37 -商品服务-API-三级分类- 分类删除细化_第1张图片

2.删除方法具体如下

    remove(node, data) {
      var ids = [data.catId];

      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getDataList();
            this.expandedkeys = [node.parent.data.catId];
          });
        })
        .catch(() => {});
    },

 3.实现效果如下

谷粒商城day37 -商品服务-API-三级分类- 分类删除细化_第2张图片

 删除后立马刷新并且显示当前层级可以看到dsa323分类没了

 谷粒商城day37 -商品服务-API-三级分类- 分类删除细化_第3张图片

 

你可能感兴趣的:(谷粒商城,分类删除细化,vue)