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

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

级联选择器组件：

javascript 复制代码

<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>
export default {
  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: 14px 5px 10px;
    &::-webkit-scrollbar-thumb {
      display: none;
    }
  }
  .popper__arrow {
    display: none;
  }
  background: rgba(20, 51, 88, 0.5);
  box-shadow: 0px 2px 12px 0px rgba(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>

组件使用：

javascript 复制代码

<BasicCascader
      v-model="areaCode"
      text
      class="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"
    />


import BasicCascader from "@/components/basic/basicCascader";


  components: { BasicCascader },


  data() {
    return {
      areaCode: "", //选中的areaCode
      areaTypeList: [], //区域类型列表
    };
  },


  methods: {   
   // 展开节点发生变化时
    expandChange(e) {
      this.areaCode = [e?.[0], ""];
      this.handleChangeArea(this.areaCode);
    },
  },