实现el-selet中分组显示option

1、官网是这样处理得，但是前提是一次性从后台接口获取数据后展示得

<template>
  <el-select v-model="value" placeholder="Select" style="width: 240px">
    <el-option-group
      v-for="group in options"
      :key="group.label"
      :label="group.label"
    >
      <el-option
        v-for="item in group.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-option-group>
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  {
    label: 'Popular cities',
    options: [
      {
        value: 'Shanghai',
        label: 'Shanghai',
      },
      {
        value: 'Beijing',
        label: 'Beijing',
      },
    ],
  },
  {
    label: 'City name',
    options: [
      {
        value: 'Chengdu',
        label: 'Chengdu',
      },
      {
        value: 'Shenzhen',
        label: 'Shenzhen',
      },
      {
        value: 'Guangzhou',
        label: 'Guangzhou',
      },
      {
        value: 'Dalian',
        label: 'Dalian',
      },
    ],
  },
]
</script>

2、如果想使用远程搜索得el-select且又想每次查询时分组展示，可以这样

<el-col :span="10">
	<el-form-item label="所属作者" prop="talentsNameArr">
		<el-select v-model="serviceForm.talentsNameArr" filterable remote
				   placeholder="请选择" remote-show-suffix @change="changeTalentTag" @focus="talentData('')"
				   :remote-method="addKeywordsStandard" :loading="false" :disabled="disabled1" style="width: 20rem;" value-key="id">
			<el-option v-for="talents in talentOptions" :key="talents.id" :label="talents.name" :value="talents" :class="{'highlight':talents.enterPriseName==='手动输入'}">
				<div>
					<span style="float: left">{{ talents.name }}</span>
					<span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{talents.enterPriseName }}</span>
				</div>
			</el-option>
		</el-select>
	</el-form-item>
</el-col>

@focus事件中处理逻辑

const talentData = async (query) => {
    talentOptions.value = await getTalentList(query);
    if(query){
        talentOptions.value.unshift({id: '', name: query, entityId: '', enterPriseName: '手动输入'});
    }
};

//添加人才

const addKeywordsStandard = (query) => {

  if (query) {

    talentData(query);

    // setTimeout(() => {

    //   talentOptions.value = talentOptions.value.filter((item) => {

    //     return item.name.toLowerCase().includes(query.toLowerCase())

    //   })

    // }, 200);

  }

};