ElSelect 选择器默认打开下拉框，通过代码的层面打开下拉框。

有时候“调皮的产品”同学总是很有想法， 明明有Cascader级联选择器不去使用，非的使用ElSelect选择器做出级联的效果，这个时候除了心里默默地祝福一下，也只能去做出对方想要的效果。

逻辑上主要使用了 Ref.value?.toggleMenu?.() 方法，通过代码层面触发select 展开下拉。
如果 blur失去焦点时，选择器没有选择值，将上一次选择的值重新赋值上去 完成级联效果

[假装有GIF图.gif]

所有代码如下，复制粘贴即可运行，根据自己需求简化。

<template>
  <div class="select-demo">
    <el-button type="primary" @click="copy">赋上初始值</el-button>
    <el-select
      class="select-width"
      v-model:modelValue="form.time"
      @change="computedTime(1)"
      placeholder="请选择统计周期"
      style="width: 150px"
    >
      <el-option
        v-for="item in timeList"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      ></el-option>
    </el-select>

    <el-select
      class="select-width"
      ref="timeValueRef"
      style="width: 150px"
      v-model:modelValue="form.timeValue"
      no-data-text="请先选择统计周期"
      placeholder="请选择统计时间"
      @change="assignment"
      @blur="onBlur"
    >
      <el-option
        v-for="item in timeValueList"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      ></el-option>
    </el-select>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from 'vue'
import { ElSelect, ElOption, ElButton } from 'element-plus'

// 表单数据
const form = reactive({
  time: '',
  timeValue: ''
})
//  暂存的数据 用于取消选择的 赋值
const temporarily = reactive({
  time: '',
  timeValue: ''
})
// Ref 对象
const timeValueRef = ref<InstanceType<typeof ElSelect>>()
// 选择统计周期
const timeList = ref<Array<Record<string, string>>>([
  { label: '分钟', value: '1' },
  { label: '小时', value: '2' },
  { label: '天', value: '3' },
  { label: '周', value: '4' }
])
// 选择统计时间
const timeValueList = ref<Array<Record<string, string>>>([
  { label: '近10分钟', value: '10' },
  { label: '近20分钟', value: '20' },
  { label: '近30分钟', value: '30' },
  { label: '近60分钟', value: '60' }
])
// 失去焦点的 判断
const onBlur = () => {
  // 如果当前值为空，则赋值暂存的值
  if (form.timeValue == '') {
    form.time = temporarily.time
    form.timeValue = temporarily.timeValue
    // 重新生成新的下拉
    computedTime()
  }
}

// 根据 周期列表的选择， 重新生成新的下拉
const computedTime = (type?: number) => {
  timeValueList.value = []
  //   这里的判断是因为 有可能是其他方法调用的 非点击调用的 需要作区分， 得看实际业务来
  if (type === 1) {
    form.timeValue = '' // 清空
    nextTick(() => {
      // 使用 toggleMenu() 方法 来展开下拉
      timeValueRef.value?.toggleMenu?.()
      //   使  elselect 获取焦点
      timeValueRef.value?.focus?.()
    })
  }

  if (form.time === '1') {
    timeValueList.value = [
      { label: '近10分钟', value: '10' },
      { label: '近20分钟', value: '20' },
      { label: '近30分钟', value: '30' },
      { label: '近60分钟', value: '60' }
    ]
  }
  if (form.time === '2') {
    timeValueList.value = [
      { label: '近12小时', value: '720' },
      { label: '近24小时', value: '1440' },
      { label: '近72小时', value: '4320' },
      { label: '近144小时', value: '8640' }
    ]
  }
  if (form.time === '3') {
    timeValueList.value = [
      { label: '近7天', value: '10080' },
      { label: '近15天', value: '21600' },
      { label: '近30天', value: '43200' },
      { label: '近60天', value: '86400' }
    ]
  }
}
const copy = () => {
  let time = '2'
  let timeValue = '1440'
  form.time = time
  form.timeValue = timeValue

  // 第一次获取到 时段 和 时间的时候， 需要记录一下 ，用于后期没选择的回显
  temporarily.time = time
  temporarily.timeValue = timeValue

  computedTime()
}
// 当时间发生改变时 调用接口 或者记录一下
const assignment = () => {
  temporarily.time = form.time
  temporarily.timeValue = form.timeValue
  computedTime()
}
onMounted(() => {})
</script>
<style scoped>
.select-demo {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 20px;
}
</style>