需求分析
点击某一个一级或二级分类, 点击树节点的append, 弹框,出现 新增分类的表单, 点击确定, 树节点刷新, 默认展开点击的父节点, 并出现新增的节点.
使用对话框组件
使用组件中的对话框
将下面的代码进行复制, 其中 dialogVisible = false 是用来控制弹框显示和隐藏的.
并且使用下面的 自定义内容的嵌套表单的 对话框 代码进行复制
前端新增逻辑的编写
复制上面的代码如下. 将不需要的属性进行删除 .
其中:model="category"
用于表单数据的绑定
addCategory
方法用于点击确定后, 向后台发送请求等操作.
在data 中, 声明了category 对象, 用于传递参数和给定参数默认值.
dialogVisible 用于控制弹框的关闭和开启
点击树形的 append, 触发的方法, data为点击的父节点数据, 在此方法内, 用于控制弹框的开启和给传递的参数赋值, 获取父级的id , 和分类的层级加一, *1 是用于把字符串转为数字
addCategory 方法, 用于关闭表单, 发送请求, 给出提示, 刷新树节点, 并且把name置空,避免保留上一次输入的值.
完整的代码如下
<!-- -->
<template>
<div>
<el-tree
:data="menus"
:props="defaultProps"
:expand-on-click-node="false"
show-checkbox
:default-expanded-keys="expandedkey"
node-key="catId"
>
<!--
{ node, data } 为解构的方式传递参数
node 为当前的节点的值, 节点的名称
data 为节点的数据
-->
<span class="custom-tree-node" slot-scope="{ node, data }">
<!-- 显示节点的名称 -->
<span>{{ node.label }}</span>
<span>
<!-- 两个按钮 => 箭头函数 调用指定的方法 -->
<el-button
v-if="node.level <=2"
type="text"
size="mini"
@click="() => append(data)"
>Append</el-button>
<el-button
v-if="node.childNodes.length ==0"
type="text"
size="mini"
@click="() => remove(node, data)"
>Delete</el-button>
</span>
</span>
</el-tree>
<el-dialog title="添加分类" :visible.sync="dialogVisible" width="30%">
<el-form :model="category">
<el-form-item label="分类名称">
<el-input v-model="category.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addCategory">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
return {
//表单的值
category: { name: "", parentCid: 0, catLevel: 0, showStatus: 1, sort: 0 },
dialogVisible: false,
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;
});
},
//添加分类
addCategory() {
//点击添加分类, 关闭表单
this.dialogVisible = false;
console.log("提交的表单数据: ", this.category);
this.$http({
url: this.$http.adornUrl("/product/category/save"),
method: "post",
data: this.$http.adornData(this.category, false),
}).then(({ data }) => {
//添加成功后的操作
this.$message({
type: "success",
message: "分类添加成功!",
});
this.getMenus();
this.expandedkey = [this.category.parentCid];
this.category.name = "";
});
},
// 点击树形的 append, 触发的方法, data为点击的父节点数据
append(data) {
console.log("append ", data);
//点击 append 弹出添加分类的对话框
this.dialogVisible = true;
//父级的id
this.category.parentCid = data.catId;
//分类的层级, 当前层级, 加一
this.category.catLevel = data.catLevel * 1 + 1;
},
remove(node, data) {
//console.log("remove ", node, data);
this.$confirm(`是否删除 [ ${data.name} ] 菜单?`, "提示", {
confirmButtonText: "确定", // 点击确定, 触发then
cancelButtonText: "取消", // 点击取消 触发 catch ,由于取消不需要任何的操作, 但删除catch会报错, 因此保留空方法
type: "warning",
})
.then(() => {
var idArr = [data.catId];
this.$http({
url: this.$http.adornUrl("/product/category/delete"),
method: "post",
data: this.$http.adornData(idArr, false),
}).then(({ data }) => {
this.$message({
type: "success",
message: "删除成功!",
});
//expandedkey = node.parent.data.catId;
this.getMenus();
this.expandedkey = [node.parent.data.catId];
});
})
.catch(() => {});
},
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
//生命周期 - 创建完成(可以访问当前this实例) 组件创建完成就发送请求
created() {
this.getMenus();
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发. 页面被激活就会发送请求
};
</script>
<style scoped>
</style>
测试效果
测试效果如下, 成功添加分类并显示 .