本文主要是介绍实现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);
}
};
这篇关于实现el-selet中分组显示option的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
