当前位置: 首页 > news >正文

输入搜索、分组展示选项、下拉选取,el-select 实现:即输入关键字检索,返回分组选项,选取跳转到相应内容页 —— VUE 项目-全局模糊检索

后端数据代码写于下一篇:输入搜索、分组展示选项、下拉选取,全局跳转页,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 选择器   

【项目实际效果】: 便捷简洁的企业官网

后端数据代码写于下一篇:输入搜索、分组展示选项、下拉选取,全局跳转页,el-select 实现 —— 后端数据处理代码,抛砖引玉展思路 

相关文章:

输入搜索、分组展示选项、下拉选取,el-select 实现:即输入关键字检索,返回分组选项,选取跳转到相应内容页 —— VUE 项目-全局模糊检索

后端数据代码写于下一篇&#xff1a;输入搜索、分组展示选项、下拉选取&#xff0c;全局跳转页&#xff0c;el-select 实现 —— 后端数据处理代码&#xff0c;抛砖引玉展思路 【效果图】&#xff1a;分组展示选项 【去界面操作感受一下】—> 便捷简洁的企业官网 【录制效…...

Web入侵实战分析-常见web攻击类应急处置实验2

场景说明 某天运维人员&#xff0c;发现运维的公司站点被黑页&#xff0c;首页标题被篡改&#xff0c;你获得的信息如下&#xff1a; 操作系统&#xff1a;windows server 2008 R2业务&#xff1a;公司官网网站架构&#xff1a;通过phpstudy运行apache mysqlphp开放端口&…...

DeepSeek:AI商业化的新引擎与未来蓝图

摘要 在人工智能迅猛发展的浪潮中&#xff0c;DeepSeek以其卓越的技术实力和高超的商业化能力崭露头角。作为一款现象级AI产品&#xff0c;它不仅在算法性能上位居行业前列&#xff0c;还通过灵活的定制解决方案渗透到金融、医疗、零售等多个领域。DeepSeek以创新的商业模式和场…...

从零开始学习PX4源码9(部署px4源码到gitee)

目录 文章目录 目录摘要1.gitee上创建仓库1.1 gitee上创建仓库PX4代码仓库1.2 gitee上创建子仓库2.固件在gitee部署过程2.1下载固件到本地2.2切换本地分支2.3修改.gitmodules内容2.4同步子模块仓库地址2.5同步子模块仓库地址更新(下载)子模块3.一级子模块和二级子模块的映射关…...

wps中zotero插件消失,解决每次都需要重新开问题

参考 查看zotero目录 D:\zotero\integration\word-for-windows 加载项点击 dotm即可 长期解决 把dom 复制到 C:\Users\89735\AppData\Roaming\kingsoft\office6\templates\wps\zh_CN还是每次都需要重新开的话 重新加载一下...

【Python 语法】collections 模块的字典类 defaultdict

默认字典 (defaultdict) 的语法defaultdict 的常见应用场景1. 计数2. 分组3. 嵌套字典 defaultdict 是 Python 中 collections 模块提供的一个字典类&#xff0c;它和普通字典&#xff08; dict&#xff09;的主要区别在于 提供了一个默认值&#xff0c;可以避免在访问字典中…...

《论系统需求分析方法》写作心得 - 系统分析师

系统需求分析方法论述 一、项目概述及本人职责 本人曾参与一项企业级客户关系管理系统&#xff08;CRM&#xff09;的开发项目&#xff0c;担任系统分析师的角色。该项目旨在为企业提供一个集客户信息管理、销售过程跟踪、客户服务支持于一体的综合管理平台&#xff0c;以提升…...

Jupyter里面的manim编程学习

1.Jupyterlab的使用 因为我之前一直都是使用的vscode进行manim编程的&#xff0c;但是今天看的这个教程使用的是Jupyter&#xff0c;我也很是好奇这个manim在Jupyter这样的交互式下面会生成怎么样的效果&#xff0c;所以今天尝试了jupyter&#xff0c;并且对于两个进行比较和说…...

Python之装饰器二 带参数的装饰器

前言一、带参数的装饰器二、在装饰器里面传入参数总结 前言 暂无 一、带参数的装饰器 我们知道&#xff0c;不带参数的装饰其实就是在函数的头上添加装饰器时放一个名称&#xff0c;这种写法就默认了装饰器函数调的是被装饰函数自己&#xff0c;换句话说就是&#xff0c;大家…...

rk3588/3576板端编译程序无法运行视频推理

图片推理可以&#xff0c;但是视频不行&#xff0c;运行视频推理报错&#xff1a;segment fault. 我遇到的问题原因是ffmpeg安装有问题&#xff0c;可以先在板端运行&#xff1a;ffmpeg -version ffmpeg version 4.2.4-1ubuntu1.0firefly6 Copyright (c) 2000-2020 the FFmpe…...

静态库与动态库区别

生成方式 静态库&#xff1a;生成静态库时&#xff0c;源代码编译后生成目标文件&#xff08;.o或.obj&#xff09;&#xff0c;然后将这些目标文件打包成一个静态库文件&#xff08;如&#xff1a;.lib或.a&#xff09;。 动态库&#xff1a;生成动态库时&#xff0c;源代码编…...

鸿蒙-Canvas-图片滑动验证

文章目录 过程绘制形状方式详细解释定义变量布局整图Canvas需要滑动的形状 需要处理图片的方式处理抠图绘制抠出来的图 总结 群里有朋友问图片滑块验证码怎么做&#xff0c;就是一张图上扣出来一块&#xff0c;然后拖动这一小块完成拼图。 第一个想法就是偷懒一下&#xff1a;直…...

Python应用算法之贪心算法理解和实践

一、什么是贪心算法&#xff1f; 贪心算法&#xff08;Greedy Algorithm&#xff09;是一种简单而高效的算法设计思想&#xff0c;其核心思想是&#xff1a;在每一步选择中&#xff0c;都采取当前状态下最优的选择&#xff08;即“局部最优解”&#xff09;&#xff0c;希望通…...

网络运维学习笔记 017HCIA-Datacom综合实验01

文章目录 综合实验1实验需求总部特性 分支8分支9 配置一、 基本配置&#xff08;IP二层VLAN链路聚合&#xff09;ACC_SWSW-S1SW-S2SW-Ser1SW-CoreSW8SW9DHCPISPGW 二、 单臂路由GW 三、 vlanifSW8SW9 四、 OSPFSW8SW9GW 五、 DHCPDHCPGW 六、 NAT缺省路由GW 七、 HTTPGW 综合实…...

C++(17):为optional类型构造对象

C++(17):optional,多了一个合理的选择_c++17 max-CSDN博客 介绍了optional做为函数返回值的一种方式 其实optional也可以作为对象来使用 #include &...

Maven导入hutool依赖报错-java: 无法访问cn.hutool.core.io.IORuntimeException 解决办法

欢迎大家来到我的博客~欢迎大家对我的博客提出指导&#xff0c;有错误的地方会改进的哦~点击这里了解更多内容 目录 一、报错二、解决办法 一、报错 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-captcha</artifactId> </de…...

Simulink库浏览器中有大量的模型组件工具箱介绍

Simulink库浏览器中有大量的模型组件工具箱&#xff0c;包括Simulink工具箱、Autosar工具箱、电机控制工具箱等&#xff0c;其中Simulink工具箱包含了几十个的子模块&#xff0c;这里介绍下这些子模块的功能&#xff0c;帮助读者全面的了解这些功能模块&#xff0c;在今后的模型…...

从0到1:固件分析

固件分析 0x01 固件提取 1、从厂商官网下载 例如D-link的固件&#xff1a; https://support.dlink.com/resource/products/ 2、代理或镜像设备更新时的流量 发起中间人攻击MITM #启用IP转发功能 echo 1 > /proc/sys/net/ipv4/ip_forward#配置iptables&#xff0c;将目…...

模电知识点总结(6)

1.选取频率高于1000Hz的信号时&#xff0c;可选用高通滤波器&#xff1b;抑制50Hz的交流干扰时&#xff0c;可选用带阻滤波器如果希望抑制500Hz以下的信号&#xff0c;可选用高通滤波器。 2.有用信号频率高于1000Hz&#xff0c;可选用高通滤波器&#xff1b;希望抑制50Hz的交流…...

【Java学习】多态

目录 一、方法相同 二、方法重写 1.概念 2.条件 三、向上转型 1.概念 2.方式 四、方法绑定 五、多态 一、方法相同 方法相同要求方法名相同、参数列表相同、返回值类型相同(与两方法修饰的访问限定符相不相同、静态非静态状态相不相同无关)&#xff0c;而且在子类与父…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...