el-cascader 自动展开第一项或者某一项的下一级

想要实现的效果 当选择项只有一个的时候 自动展开下一级 最后一级和第一级的时候 用户自己点击 其他时候自动展开
看到源码是这样操作的 大家有更好的可以交流啊

<template>
  <el-cascader
    ref="cascader"
    v-model="path"
    placeholder="请选择关联项目"
    :props="props"
    :disabled="disabled"
    @visible-change="visibleChange"
  />
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Ref, Watch } from 'vue-property-decorator';
import FormBase from '@/components/form/FormBase';
import Fetch from '@/utils/fetch';
import type { Cascader } from 'element-ui';

@Component
export default class RelationItemPath extends FormBase<string> {
  @Prop({
    type: String,
    required: false,
    default: ''
  })
  private requestKey !: string;

  @Prop({
    type: Boolean,
    required: false,
    default: false
  })
  private showText !: boolean;

  @Prop({
    type: String,
    required: false,
    default: ''
  })
  private inputText !: string;

  @Prop({
    type: Boolean,
    required: false,
    default: false
  })
  private disabled !: boolean;

  @Ref()
  private readonly cascader !: Cascader

  private recordText=false; // 【修改的时候】用来判断路径改没改变  没改变传入的inputText，改变了新的选择的value

  private get path (): string {
    if (!this.value) {
      return '';
    }
    this.$refs.cascader && this.$emit('change', (this.$refs.cascader as any).inputValue);
    return this.value;
  }

  private set path (val) {
    const value = val;
    this.$emit('update:value', value);
    this.$emit('input', value);
  }

  private selectPath: string[] = [];
  private props = {
    lazy: true,
    value: 'value',
    label: 'label',
    emitPath: false, // 只返回最后一个节点
    lazyLoad: (node: any, resolve: any) => {
      const { level, pathNodes } = node;
      this.selectPath = [];
      // if (level === 0) {
      //   resolve([]);
      //   return;
      // }
      // if (level === 1) {
      //   this.dataOptions = this.dataPathOptions;
      // }
      if (pathNodes && pathNodes.length) {
        pathNodes.forEach((item: object, index: number) => {
          const value = pathNodes[index] ? pathNodes[index].value : '';
          this.selectPath.push(value);
        });
      }
      Fetch.get(`/api/project_info?application=${this.requestKey}&query=${this.selectPath.join('/')}`, {}, false).then(async response => {
        const nodes = response.data.map((item: any) => ({
          label: item.company_name || item.scan_type || item.name || item.train_type || item.parse_name,
          value: item.company_name || item.ID || item.name || item.train_type || item.parse_name,
          leaf: node.level >= 3
        }));
        resolve(Array.from(new Set(nodes)));
        if(response.data.length === 1 && level !== 3 && level !== 0 ){ // 当只有一级 自动展开下一级 后台固定关联项目只有四级 最后一级 用户自己选择
          await this.$nextTick()
          const nextMenu = (this.$refs.cascader as any).panel.$refs.menu[level]
          if (nextMenu) {
            const firstNode = nextMenu.$el.querySelector('.el-cascader-node[tabindex="-1"]');
            firstNode.focus();
            firstNode.click();
          }
        }
      });
    }
  };

  private visibleChange (visible: boolean) {
    console.log("visibleChange",this.path)
    const cascader = this.$refs.cascader as any;
    if (this.showText && !this.recordText) {
      cascader.inputValue = this.inputText;
      cascader.presentText = this.inputText;
    }
  }

  @Watch('showText', { immediate: true })
  private async onTextChange () {
    await this.$nextTick();
    const cascader = this.$refs.cascader as any;
    if (cascader && this.showText) {
      cascader.inputValue = this.inputText;
    }
  }

  @Watch('path')
  private async onPathChange () {
    await this.$nextTick();
    if (this.showText && (this.$refs.cascader as any).inputValue !== this.inputText) {
      this.recordText = true;
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/components/input/input.scss';
</style>