element级联选择器：已选中一个二级节点，随后又点击了一个一级节点（仅浏览，未确认选择），此时下拉框失去焦点并关闭

解决办法：点击一级节点，默认选中二级节点的第一个

级联选择器组件：

<template><el-cascader:class="['basic-cascader', text && 'is-text', suffixIcon]"v-bind="$attrs"v-on="$listeners":style="{ '--w': width, '--h': height }":popper-class="popperClass"></el-cascader></template><script>exportdefault{name:"basicCascader",props:{// 是否为文字下拉框-没有边框和背景色text:{type:Boolean,default:false,},width:{type:Number,default:96,},height:{type:Number,default:19,},popperClass:{type:String,default:"basic-cascader-pover",//样式名},suffixIcon:{type:String,default:"",//自定义后缀图标组件 caretTop 实心箭头},},};</script><style lang="less"scoped>.basic-cascader{width:calc(1px*var(--w));height:calc(1px*var(--h));/deep/.el-input{&.el-input--suffix{width:100%;height:100%;}}&.is-text/deep/.el-input{.el-input__inner{background:transparent;padding:0;color:transparent;border-width:0;}.el-input__suffix{display:flex;align-items:center;}}&.caretTop{/deep/.el-input__suffix{right:0;.el-input__icon{&:before{content:"\e790";}}}}}</style><style lang="less">.basic-cascader-pover{.el-cascader-menu__list{padding:0;.el-cascader-node__label{padding-left:0;}}.el-scrollbar__wrap{height:232px;overflow:auto;padding:14px5px10px;&::-webkit-scrollbar-thumb{display:none;}}.popper__arrow{display:none;}background:rgba(20,51,88,0.5);box-shadow:0px2px12px0pxrgba(0,0,0,0.25);border-radius:4px;backdrop-filter:blur(20px);border:1px solid transparent;.el-cascader-menu{border-color:rgba(232,232,232,0.1);}.el-cascader-node:not(.is-disabled),.el-cascader-node:not(.is-disabled){&.is-active,&:focus,&:hover,&.in-active-path{background:linear-gradient(270deg,rgba(0,128,240,0.1)0%,rgba(0,128,240,0.3)100%);}}.el-cascader-node.in-active-path,.el-cascader-node.is-active,.el-cascader-node.is-selectable.in-checked-path{color:#ffffff;}.el-cascader-menu{font-family:SourceHanSansCN,SourceHanSansCN;font-weight:500;font-size:14px;color:rgba(140,194,255,0.8);.el-cascader-node{height:40px;padding-left:15px;padding-right:60px;.el-icon-check{position:absolute;right:12px;left:auto;width:18px;height:100%;font-size:18px;display:flex;align-items:center;}&:not(:last-child){margin-bottom:2px;}}}}</style>

组件使用：

<BasicCascader v-model="areaCode"textclass="area-type-select":options="areaTypeList":props="{ label: 'areaName', value: 'areaCode', children: 'children' }":show-all-levels="false"@change="handleChangeArea":disabled="disabled"suffixIcon="caretTop"@expand-change="expandChange"/>importBasicCascaderfrom"@/components/basic/basicCascader";components:{BasicCascader},data(){return{areaCode:"",//选中的areaCodeareaTypeList:[],//区域类型列表};},methods:{// 展开节点发生变化时expandChange(e){this.areaCode=[e?.[0],""];this.handleChangeArea(this.areaCode);},},