商品服务-三级分类-删除操作实现

1.删除方法

 //删除
 remove(node, data) {
  var ids = [data.catId];
  this.$http({
    url: this.$http.adornUrl("/product/category/delete"),
    method: "post",
    data: this.$http.adornData(ids, false),
  }).then(({ data }) => {
    console.log("菜单删除成功!");
  });
 },

删除成功后页面还有电子书

2.删除后刷新页面

 //删除
 remove(node, data) {
  var ids = [data.catId];
  this.$http({
    url: this.$http.adornUrl("/product/category/delete"),
    method: "post",
    data: this.$http.adornData(ids, false),
  }).then(({ data }) => {
    console.log("菜单删除成功!");
    this.getMenus();
  });
 },

3.删除消息弹框

 remove(node, data) {
   var ids = [data.catId];
      this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
        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.getMenus();
          });
        })
        .catch(() => {});
      console.log("remove", node, data);
 },

详情参考ElementUI官网添加链接描述

效果图

4.删除结果消息提示

 //删除
 remove(node, data) {
    var ids = [data.catId];
    this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        this.$http({
          url: this.$http.adornUrl("/product/category/delete"),
          method: "post",
          data: this.$http.adornData(ids, false),
        }).then(({ data }) => {
          //console.log("6666:"+node.data.name);
          this.$message({
            message: `【${node.data.name}】菜单删除成功`,
            type: "success",
          });
          //刷新出新的菜单
          this.getMenus();
        });
      })
      .catch(() => {});

    console.log("remove", node, data);
  },

详情参考ElementUI官网添加链接描述

5.删除成功后展示之前的父节点

//删除
remove(node, data) {
  var ids = [data.catId];
  this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      this.$http({
        url: this.$http.adornUrl("/product/category/delete"),
        method: "post",
        data: this.$http.adornData(ids, false),
      }).then(({ data }) => {
        //console.log("6666:"+node.data.name);
        this.$message({
          message: `【${node.data.name}】菜单删除成功`,
          type: "success",
        });
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单(当前删除节点的父节点)
        this.expandedKey = [node.parent.data.catId];
      });
    })
    .catch(() => {});

  console.log("remove", node, data);
},

详情参考ElementUI官网添加链接描述

效果图

6.完整代码

<template>
  <el-tree
    :data="menus"
    :props="defaultProps"
    :expand-on-click-node="false"
    node-key="catId"
    :default-expanded-keys="expandedKey"
    show-checkbox
  >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <el-button
          type="text"
          size="mini"
          v-if="node.level <= 2"
          @click="() => append(data)"
        >
          Append
        </el-button>
        <el-button
          type="text"
          size="mini"
          v-if="node.childNodes.length == 0"
          @click="() => remove(node, data)"
        >
          Delete
        </el-button>
      </span>
    </span>
  </el-tree>
</template>

<script>
export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    return {
      menus: [],
      //默认展开节点
      expandedKey: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {
    //获取菜单
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        console.log("获取菜单数据成功", data.data);
        this.menus = data.data;
      });
    },

    //添加
    append(data) {
      console.log("添加", data);
    },

    //删除
    remove(node, data) {
      var ids = [data.catId];
      this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            //console.log("6666:"+node.data.name);
            this.$message({
              message: `【${node.data.name}】菜单删除成功`,
              type: "success",
            });
            //刷新出新的菜单
            this.getMenus();
            //设置需要默认展开的菜单(当前删除节点的父节点)
            this.expandedKey = [node.parent.data.catId];
          });
        })
        .catch(() => {});

      console.log("remove", node, data);
    },


  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},

  //生命周期 - 创建完成(可以访问当前this实例)
  created() {
    this.getMenus();
  },
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
</style>