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

Question

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>

Answer 1

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