目录
gitee仓库地址:
https://gitee.com/CMD-UROOT/my_project/commits/master
大家根据上传历史进行查找你需要的代码
业务需求:
1.解决问题
我们应该在改变一级分类的时候,要把相应的二级分类和三级分类的数据清除
当一级分类的数据发生变化的时候,二级分类和三级分类的数据要清除掉,以及上一次的catefory2Id和catefory3Id也得清除掉
当然当二级分类的发生变化的时候,我们也需要清除三级分类的数据和id
效果实现:
我们更改一级分类的时候,后面二三级分类清空了
我们更改二级分类的时候,后面三级分类清空了
2.一二三级分类确认后,父组件获取数据
当我们确认好三级分类的时候,会展示下面的信息,那么我们就需要发请求,展示数据
接口文档地址:http://39.98.123.211:8416/swagger-ui.html#/2183021697225223078423646246152550921475
接口:/admin/product/attrInfoList/{category1Id}/{category2Id}/{category3Id}
3.自定义事件----子给父传递数据
我们需要通过一级二级三级分类的id来获取平台属性数据的展示
我们知道我们的三级联动组件是子组件,而我们的Attr是父组件,也就是说子组件需要把数据给父组件,那么需要用到自定义事件
在父组件中
在views/product/Attr/index.vue中:
在子组件中,把id传给父组件Attr
在components/CategorySelect/index.vue中:
//一级分类的select事件回调（当一级分类的option发生变化的时候获取相应二级分类的数据）
async handler1() {
// console.log(111)
//清除数据
this.list2 = [];
this.list3 = [];
this.cForm.category2Id = "";
this.cForm.category3Id = "";
//解构出一级分类的id
const { category1Id } = this.cForm;
//把id传给父组件Attr
this.$emit('getCategoryId',category1Id)
//通过一级分类的id，获取二级分类的数据
let result = await this.$API.attr.reqCategory2List(category1Id);
// console.log(result) 这里查看获取二级分类数据是否成功
if (result.code == 200) {
this.list2 = result.data;
}
},
//二级分类的select事件回调（当二级分类的option发生变化的时候获取相应三级分类的数据）
async handler2() {
//清除数据
this.list3 = [];
this.cForm.category3Id = "";
//结构出数据
const { category2Id } = this.cForm;
//把id传给父组件Attr
this.$emit('getCategoryId',category2Id)
let result = await this.$API.attr.reqCategory3List(category2Id);
if (result.code == 200) {
this.list3 = result.data;
}
},
//三级分类的事件回调
handler3(){
const {category3Id} = this.cForm
//获取三级分类的id
//把id传给父组件Attr
this.$emit('getCategoryId',category3Id)
}注意新增的是这部分:
在父组件中接收子组件传递过来的id
在views/product/Attr/index.vue中:
打印:看看能不能获取到id,发现是可以的
但是我们发现对于父组件而言,无法区分是几级id
所以为了区分开,我们在子组件中传两个参数,以为对象形式给父组件传递过来
在子组件中,传两个参数给父组件Attr
在components/CategorySelect/index.vue中:
//一级分类的select事件回调（当一级分类的option发生变化的时候获取相应二级分类的数据）
async handler1() {
// console.log(111)
//清除数据
this.list2 = [];
this.list3 = [];
this.cForm.category2Id = "";
this.cForm.category3Id = "";
//解构出一级分类的id
const { category1Id } = this.cForm;
//把id传给父组件Attr
this.$emit('getCategoryId',{categoryId:category1Id,level:1})
//通过一级分类的id，获取二级分类的数据
let result = await this.$API.attr.reqCategory2List(category1Id);
// console.log(result) 这里查看获取二级分类数据是否成功
if (result.code == 200) {
this.list2 = result.data;
}
},
//二级分类的select事件回调（当二级分类的option发生变化的时候获取相应三级分类的数据）
async handler2() {
//清除数据
this.list3 = [];
this.cForm.category3Id = "";
//结构出数据
const { category2Id } = this.cForm;
//把id传给父组件Attr
this.$emit('getCategoryId',{categoryId:category2Id,level:2})
let result = await this.$API.attr.reqCategory3List(category2Id);
if (result.code == 200) {
this.list3 = result.data;
}
},
//三级分类的事件回调
handler3(){
const {category3Id} = this.cForm
//获取三级分类的id
//把id传给父组件Attr
this.$emit('getCategoryId',{categoryId:category3Id,level:3})
}注意我修改的是这里:
在父组件中接收子组件传递过来的对象
在views/product/Attr/index.vue中:
<template>
<div>
<el-card style="margin:20px 0px;">
<CategorySelect @getCategoryId="getCategoryId"></CategorySelect>
</el-card>
<el-card></el-card>
</div>
</template>
<script>
export default {
name:'Attr',
data() {
return {
//存储id将来需要发请求的时候用
category1Id: "",
category2Id: "",
category3Id: "",
}
},
methods: {
//自定义事件的回调
getCategoryId({ categoryId, level }) {
//区分三级分类相应的id，以及父组件进行存储
if (level == 1) {//当重选一级分类的时候,2-3级分类的id需要清空
this.category1Id = categoryId;
this.category2Id = "";
this.category3Id = "";
} else if (level == 2) {//当重选二级分类的时候,3级分类的id需要清空
this.category2Id = categoryId;
this.category3Id = "";
} else {
//代表三级分类的id有了
this.category3Id = categoryId;
//发请求获取平台的属性数据
this.getAttrList();
}
},
getAttrList(){
console.log('发请求')
}
},
}
</script>
<style scoped>
</style>效果:
