Vue elementui级联选择器 getCheckedNodes获取不到节点

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>

 

CascaderPanel Events api里面没有active-item-change这个方法啊,只有change当选中节点变化时触发和expand-change当展开节点发生变化时触发。那你把active-item-change改为change=“getChild”不加括号

 

您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632