后端数据代码写于下一篇：输入搜索、分组展示选项、下拉选取，全局跳转页，el-select 实现 —— 后端数据处理代码，抛砖引玉展思路
【效果图】：分组展示选项 =>【提供界面操作体验】
【录制效果视频展示】：
菜单栏-快速检索1
【流程】：
（1）读取目标数据，如果是多个，需要多次读取；
（2）对数据进行分组，放入特定分组数据结构；
（3）各分组，做相应设置；
（4）数据组装到 el-select 控件；
（5）点击选项，跳转到相应位置。现将关键代码及结构附于下方：
1. 分组数据结构示例：
（1）标准结构示例：
groupSelectOptions2: [{id: 1,label: '超期',options: [{value: 'cqwbj',label: '超期未办结'},{value: 'ycq',label: '已超期'}]},{id: 2,label: '按天',options: [{value: 't1',label: '1天'},{value: 't2',label: '2天'},{value: 't3',label: '3天'}]},{id: 3,label: '按小时',options: [{value: 'h1',label: '1小时'},{value: 'h2',label: '2小时'}]}]（2）项目数据结构示例：
主要的就 label 和 srcPath 这两个属性（其余省略）：label，用于显示；srcPath，存储选取跳转的 url 地址。
[{label:'',options:[{srcPath: ''}]},
]2. 封装 el-select 成组件：
<template><div style="height: 15px; justify-content: center; align-items: center;"><template><el-selectv-model="innerValue"filterable:remote="true":likeQuery="false"@change="changeSelect":clearable="clearable":multiple="multiple":remote-method="fetchOptions"size="small"popper-class="productGroupSelector":placeholder="placeholder"><el-option-group class="productGroupSelector-group" v-for="group in localOptions" :key="group.label" :label="group.label"><div style="" v-if="multiple"><div style=""><el-checkbox v-model="group.checked" @change="selectAll($event, group.id)" :indeterminate="group.isIndeterminate"></el-checkbox></div><div><el-optionclass="productGroupSelector-option"v-for="item in group.options":key="item.value":label="item.label":value="item"></el-option></div></div><div v-else><el-optionclass="productGroupSelector-option"v-for="(item,index) in group.options":key="index":label="item.label":value="item"></el-option></div></el-option-group></el-select></template></div>
</template>3. javascript 和 css
<script>import $ from 'jquery';
import {getRequest} from "@/api/api";
export default {name: 'LiloGroupSelect',model: {prop: 'value',event: 'change'},props: {value: {type: [String, Array],default: () => []},options: {type: Array,default: () => []},placeholder: {type: String,default: '请选择'},multiple: {type: Boolean,default: false},clearable: {type: Boolean,default: false},collapseTags: {type: Boolean,default: false},likeQuery: {type: Boolean,default: false},searchApi: {type: String,default: '' // 后端搜索API地址}},data() {return {innerValue: this.value,inputValue: '' ,// 添加这一行来定义 inputValueselectedOption: '',// searchQuery: '',filteredOptions: [],loading: false,allOptions: [], // 存储所有后端返回的选项，用于筛选localOptions: [...this.options], // 新增属性，用于存储当前选项groupSelectOptions2: [{id: 1,label: '超期',options: [{value: 'cqwbj',label: '超期未办结'},{value: 'ycq',label: '已超期'}]},{id: 2,label: '按天',options: [{value: 't1',label: '1天'},{value: 't2',label: '2天'}]},{id: 3,label: '按小时',options: [{value: 'h1',label: '1小时'},{value: 'h2',label: '2小时'}]}],isDropdownVisible: false, // 控制下拉列表的显示状态(默认收起)隐藏};},mounted() {this.innerValue = this.value;this.allOptions = [...this.options, ...this.groupSelectOptions2]; // 初始化所有选项this.filteredOptions = [...this.options]; // 初始化过滤后的选项},watch: {value(newVal, odlVal) {this.innerValue = newVal;console.log("当前输入值或选择值："+this.innerValue)},searchQuery(newVal) {console.log("监听查询输入："+newVal)this.fetchOptions(newVal);}},methods: {// 模拟后端查询，直接返回 groupSelectOptions2fetchOptions(queryString) {console.log("调用后端，请求数据....查询条件：【"+queryString+"】查询接口为："+this.searchApi)if (this.loading) return;this.loading = true;try {// 此处模拟为直接返回 groupSelectOptions2，实际应调用后端APIthis.allOptions = [...this.options, ...this.groupSelectOptions2]; // 合并原始选项和后端返回的选项（去重应在后端处理或此处额外处理）if(this.likeQuery) queryString = '%'+queryString+'%';this.getRequest(this.searchApi, {query: queryString}).then(resp =>{if (resp){this.localOptions = [...resp];// console.log("调用后端，返回结果："+JSON.stringify(resp))}});// this.localOptions = [...this.groupSelectOptions2]; // 更新 localOptions 而不是 this.options// this.filteredOptions = this.filterOptionsByQuery(this.allOptions, queryString);console.log("调用后端，数据处理结束。。。")} catch (error) {console.error('搜索失败:', error);} finally {this.loading = false;}},async query(queryString){if(this.likeQuery) queryString = '%'+queryString+'%';this.getRequest(this.searchApi, {query: queryString}).then(resp =>{if (resp){this.localOptions = [...resp];}});},filterOptionsByQuery(options, query) {return this.allOptions.reduce((acc, group) => {const filteredGroup = { ...group, options: group.options.filter(option => option.label.toLowerCase().includes(query.toLowerCase())) };// const filteredGroup = { ...group, options: group.options.filter(option => option.label.includes(query)) };if (filteredGroup.options.length > 0) {acc.push(filteredGroup);}return acc;}, []);},selectAll(val, id) {const selectOption = this.options.find(f => f.id === id);const arr = selectOption.options.map(m => m.value);if (val) {if((typeof this.innerValue !== 'object') || this.innerValue.constructor !== Array) {this.innerValue = [];}arr.forEach(item => {if (!this.innerValue.includes(item)) {this.innerValue.push(item);}});} else {this.innerValue.forEach((item, index) => {if (arr.includes(item)) {this.innerValue.splice(index, 1, '');}});}this.innerValue = this.innerValue.filter(f => f !== '');if (selectOption.checked) {selectOption.isIndeterminate = false;}this.$emit('change', this.innerValue);},changeSelect(val) {console.log("选项变更值："+val)if (this.multiple) {this.options.forEach(item => {const arr = item.options.map(m => m.value);item.isIndeterminate = arr.some(v => {return val.some(s => s === v);});item.checked = arr.every(v => {return val.some(s => s === v);});if (item.checked) {item.isIndeterminate = false;}});this.$emit('change', this.innerValue);} else {this.$emit('change', val);}},}
};
</script><style>.productGroupSelector {min-width: initial !important;width: 415px;}
</style><style lang="scss" scoped>
::v-deep {.el-select-group {width: 400px;display: flex;flex-wrap: wrap;justify-content: start;padding: 0px 10px;}.el-select-group__title {padding-left: 20px;font-size: 12px;}
}.productGroupSelector-group {padding-top: 5px;display: flex;// align-items: center;// flex-wrap: wrap;// width: 400px;padding-bottom: 5px;flex-direction: column;margin: 0 5px;// &:not(:last-child) {// border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);// }&::after {display: none;}
}.productGroupSelector-option {display: inline-flex;align-items: center;flex-wrap: wrap;
}// .productGroupSelector {
// .el-scrollbar__view .el-select-dropdown__list {
// display: flex;
// flex-wrap: wrap;
// justify-content: space-between;
// align-items: baseline;
// padding-top: 0;
// overflow-x: hidden;
// }
// .el-select-dropdown__wrap .el-scrollbar__wrap {
// max-height: 650px;
// }
// }
</style>4. 引用 LiloGroupSelect
<el-row :gutter="20" style="display: flex; border-radius: 5px;" ><el-col style="margin-bottom: 7px;"><lilo-group-select @change="groupSelectChange" :multiple="false" :likeQuery="true" :searchApi="'/api/list/search'" clearable placeholder="请输入快速搜索" ></lilo-group-select></el-col>
</el-row><script>
import LiloGroupSelect from "@/components/common/help/ElementUIGroupSelect";
export default {name: "***",components: {LiloGroupSelect},data(){return{}},methods: {groupSelectChange(option) {console.log("下拉选项选中："+JSON.stringify(option));if(option==''|| option.srcPath=='')return;// this.$router.push(option.srcPath);this.$router.push(option.srcPath).catch(err => {if (err.name !== 'NavigationDuplicated') {// 处理其他可能的错误console.error(err);}// 对于 NavigationDuplicated 错误，可以选择不做任何处理});},}
}
【效果图】：分组展示选项
参考资源：
1. Vue【原创】基于elementui的【分组多选下拉框group-select】
2. el-select选择器组件封装 下拉菜单 elementui
3. Vue Element 分组+多选+可搜索Select选择器实现示例
4. 基于Vue和Element-UI自定义分组以及分组全选Select 选择器
