Vue根据后台返回数据创建商品类目,parentId为0时返回父级菜单数据,请求值为其他时返回子菜单数据
第一个函数getDate获取父级菜单数据赋值给options,并给每个数组对象添加一个空数组children:[ ]用于接收子菜单数据
这里选择父菜单选项时候打印出$refs['cascaderAddr'].getCheckedNodes()的值为空数组
@active-item-change改为change的话点击事件都不触发
<div class="creation_box">
<el-cascader-panel
:options="options"
:props="props"
ref="cascaderAddr"
@active-item-change="getChild()"
size="medium"
style="margin: 20px 0"
></el-cascader-panel>
</div>
<script>
import { shopCategoryList } from '@/api/shop.js'
export default {
data() {
return {
options: [],
props: {
value: 'id',
label: 'name',
children: 'children'
}
}
},
created() {
this.getDate()
},
methods: {
getDate() {
shopCategoryList({ parentId: 0 }).then((res) => {
console.log(res);
this.options = res.data
this.options.forEach((item, index) => {
this.options[index].children = []
})
})
},
getChild() {
let childrenId = this.$refs['cascaderAddr'].getCheckedNodes()
console.log(childrenId);
// shopCategoryList({parentId:childrenId}).then((res)=>{
// this.options.children = res.data
// })
}
}
}
</script>