首页 > 技术文章 > 谷粒商城-批量删除

fayeelse 2021-11-04 12:42 原文

首先在前端的树组件中加入ref标识,命名为menuTree。

 

 设置删除按钮

 

 这时,此前设置的ref标识便有了作用,this.$refs.menuTree.getCheckedNodes();,getCheckedNodes意为若节点可被选择,则返回目前被选中的节点所组成的数组。那么该语句的意思可以理解为找到被命名为menuTree的所选节点。之后通过for循环遍历。把遍历的元素catId加入到此前设置好的catIds[]数组中,使用httppost即可。

batchDelete方法代码:

batchDelete() {
      let catIds = [];
      let checkedNodes = this.$refs.menuTree.getCheckedNodes();
      console.log("被选中的元素", checkedNodes);
      for (let i = 0; i < checkedNodes.length; i++) {
        catIds.push(checkedNodes[i].catId);
      }
      this.$confirm(`是否批量删除【${catIds}】当前菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(catIds, false),
          }).then(({ data }) => {
            this.$message({
              message: "菜单批量删除成功",
              type: "success"
            });
            this.getMenus();
          });
        })
        .catch(() => {});
    },

 

推荐阅读