element UI级联选择器---动态加载数据，动态控制二级面板的显示与隐藏

 一级数据列表是在页面初始化的时候调用接口返回的数据；

二级数据列表需要在获取到一级数据id的时候调用接口得到数据进行列表渲染；

问题：

使用了el-cascader后发现如果第一次点击父级A获取到二级数据，并且二级面板显示，第二次点击父级B获取到二级数据为[ ]，此时二级面板不仅没有隐藏，同时展示的仍然是父级A的二级数据；

解决方法：

获取到二级面板的元素，通过方法进行display的显示与隐藏；

<template slot-scope="{disabled,size}" slot="packageIdSearch"><el-cascaderv-model="search.packageId":props="hostProps":options="hostOptions"placeholder="请选择适用host"clearable><template slot-scope="{ node, data }"><span @click="parentNode(node)" style="display:block;">{{ data.label }</span></template></el-cascader>
</template>

data() {return {hostProps: {lazy: true,checkStrictly: true,lazyLoad: (node, resolve) => {if (node.data) {this.getHostVersion(node, node.data.id, resolve)}}},hostOptions: [],};
},mounted() {getPackage().then((res) => {if (res.status == 200) {res.data.data.map((item) => {item.value = item.iditem.label = (item.regionType == 'internal' ? '(D) ' : '(U) ') + item.nebulaPackageName})this.hostOptions = res.data.data}})
},methods: {// 级联搜索适用hostparentNode(node) {let el_node = document.querySelectorAll('.el-cascader-menu');if (el_node[node.level] && el_node.length > 0) {el_node[node.level].style.display = "block";}},getHostVersion(node, v, resolve) {let el_node = document.querySelectorAll('.el-cascader-menu');getversionList({ packageId: v }).then((res) => {if (res.status == 200) {let arr = []if (res.data.data.length > 0) {arr = res.data.dataarr.map((item) => {item.value = item.iditem.label = item.versionName + '('+ item.versionCode + ')'item.leaf = true})if (el_node[node.level] && el_node.length > 0) {el_node[node.level].style.display = "block";}resolve(arr)} else {if (el_node[node.level] && el_node.length > 0) {el_node[node.level].style.display = "none";}resolve([])}} else {resolve([])}})},
}