1.添加菜单
把资料里的sys_menus.sql复制到 admin库执行
可以看到菜单和一些子菜单就被添加进来了
2.接口文档链接
https://easydoc.xyz/s/78237135/ZUqEdvA4/qvTTYD1x
3.抽取三级分类组件
因为我们在三个页面的左侧都要显示三级分类,然后右侧根据三级分类分别显示属性分组,规格参数与销售属性,
所以左侧作为一个公共部分可以抽取出来
创建公共组件
内容为之前我们写过的三级分类中拷过来,不过一些事件与按钮都不需要了
<template>
<div>
<el-tree
:data="menus"
:props="defaultProps"
node-key="catId"
ref="menuTree"
@node-click="nodeClick"
>
</el-tree>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》'
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
return {
menus: [],
defaultProps: {
children: "children",
label: "name",
},
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
getDataList() {
this.dataListLoading = true;
this.$http({
url: this.$http.adornUrl("/product/category/list/tree"),
method: "get",
}).then(({ data }) => {
console.log("get data success!" + data.data);
this.menus = data.data;
console.log("menus:" + this.menus);
});
},
nodeClick(data, node, component) {
this.$emit("node-click",data, node, component);
},
},
//声明周期 - 创建完成(可以访问当前this实例)
created() {
this.getDataList();
},
//声明周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped>
</style>
4.子组件编写节点点击事件方法,父子组件交互
子组件中
父组件中
5.点击后测试成功