实现el-selet中分组显示option

本文主要是介绍实现el-selet中分组显示option，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

<template><el-select v-model="value" placeholder="Select" style="width: 240px"><el-option-groupv-for="group in options":key="group.label":label="group.label"><el-optionv-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 remoteplaceholder="请选择" 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);

}

};