elementUI Cascader级联选择器组件 获取多层级的对象形式数据

贴代码

<el-cascader 
    style="width: 100%"
    ref="subjectMajorCascaderElem"
    placeholder="请选择"  
    @change="selectSubjectMajor" 
    filterable 
    clearable 
    v-model="basicInfos.subject" 
    :options="subjectMajorList" 
    :props="{expandTrigger: 'hover',label: 'fieldName', value: 'id'}" size="large"
/>

const state = reactive({
    subjectObj: {},  //学科数据对象
    majorObj: {}, //专业数据对象
})


//选择学科专业
        function selectSubjectMajor(){
            state.subjectObj = {}  //注意这里需要重置之前的数据
            state.majorObj = {}
            const checkedNode = state.subjectMajorCascaderElem?.getCheckedNodes()  //获取选中的元素节点
            if(checkedNode?.length){
                const nodeList = checkedNode[0]?.pathNodes||[]  //选中的元素节点数据
                if(nodeList?.length>0){
                    for(let item of nodeList){
                        const subjectMajorObj = {}
                        if(item?.data?.id){  //存在数据
                            subjectMajorObj["id"] = item.data?.id||""
                            subjectMajorObj["fieldName"] = item.data?.fieldName||""
                            subjectMajorObj["fieldLevel"] = item.data?.fieldLevel||""
                            subjectMajorObj["parentId"] = item.data?.parentId||""
                            if(item.data.fieldLevel == 1){  //学科
                                state.subjectObj = {...subjectMajorObj}
                            }else if(item.data.fieldLevel == 2){  //专业
                                state.majorObj = {...subjectMajorObj}
                            }
                        }
                    }
                }
            }
        }



posted @ 2023-01-06 11:14  huihuihero  阅读(678)  评论(0编辑  收藏  举报