首先在前端的树组件中加入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(() => {});
},