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

vue中el-select 模糊查询下拉两种方式

第一种:先获取所有下拉数据再模糊查询,效果如下

1,页面代码:speciesList是种类列表List, speciesId 是speciesList里面对应的id,filterable是过滤查询标签

<el-form-item label="种类" prop="speciesId"><el-select v-model="queryParams.speciesId" filterable ><el-option v-for="option in speciesList"  :key="option.id" :value="option.id"  :label="option.value">{{ option.value}}</el-option></el-select>
</el-form-item>

 2,js代码

 data() {return {
speciesList:[{ id: 0, value: '狗' },{ id: 1, value: '猫' },{ id: 2, value: '兔子' }]]}
}

第二种:直接输入查询参数,自动调用接口查询,返回匹配集合List

1,页面代码
 <el-form-item label="种类" prop="speciesId"><el-select  v-model="form.speciesId"placeholder="种类"  clearable size="mini"  filterable  remote  :remote-method="getSpecList"><el-option v-for="kv in speciesList" :key="kv.id" :value="kv.id"  :label="kv.title"></el-option></el-select>
</el-form-item>

2,js

  /** 查询宠物-种类列表 */getSpecList(query) {this.queryParams1.title=query;listSpecie(this.queryParams1).then(response => {this.speciesList = response.rows;});}

相关文章:

vue中el-select 模糊查询下拉两种方式

第一种&#xff1a;先获取所有下拉数据再模糊查询&#xff0c;效果如下 1&#xff0c;页面代码&#xff1a;speciesList是种类列表List, speciesId 是speciesList里面对应的id&#xff0c;filterable是过滤查询标签 <el-form-item label"种类" prop"species…...

深入解析PostgreSQL中的PL/pgSQL语法

在数据库管理系统中&#xff0c;PostgreSQL因其强大的功能和稳定性而受到广泛欢迎。其中&#xff0c;PL/pgSQL作为PostgreSQL的过程化语言&#xff0c;为用户提供了更为灵活和强大的编程能力。本文将深入解析PL/pgSQL的语法&#xff0c;帮助读者更好地掌握这门语言&#xff0c;…...

Vue 3集成海康Web插件实现视频监控

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;组件封装篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来组件封装篇专栏内容:Vue 3集成海康Web插件实现视频监控 引言 最近在项目中使用了 Vue 3 结合海康Web插件来实…...

多目标优化算法:多目标蛇鹫优化算法(MOSBOA)求解DTLZ1-DTLZ9,提供完整MATLAB代码

一、蛇鹫优化算法 蛇鹫优化算法&#xff08;Secretary Bird Optimization Algorithm&#xff0c;简称SBOA&#xff09;由Youfa Fu等人于2024年4月发表在《Artificial Intelligence Review》期刊上的一种新型的元启发式算法。该算法旨在解决复杂工程优化问题&#xff0c;特别是…...

机器翻译基础与模型 之三:基于自注意力的模型

基于RNN和CNN的翻译模型&#xff0c;在处理文字序列时有个问题&#xff1a;它们对序列中不同位置之间的依赖关系的建模并不直接。以CNN的为例&#xff0c;如果要对长距离依赖进行描述&#xff0c;需要多层卷积操作&#xff0c;而且不同层之间信息传递也可能有损失&#xff0c;这…...

如何使用PCL处理ROS Bag文件中的点云数据并重新保存 ubuntu20.04

如何使用PCL处理ROS Bag文件中的点云数据并重新保存 要精确地处理ROS bag中的点云数据并使用PCL进行处理&#xff0c;再将处理后的数据保存回新的ROS bag文件&#xff0c;以下方案提供了详细、专业和严谨的步骤。 步骤 1: 环境设置 确保安装了ROS和PCL&#xff0c;并配置好环…...

背包问题(动态规划)

背包问题是一种组合优化的问题&#xff0c;它有多种变体&#xff0c;但最常见的两种是0/1背包问题和完全背包问题。 0/1背包问题 问题描述&#xff1a; 假设你有一个背包&#xff0c;背包的容量为W&#xff08;可以是重量或者体积等度量&#xff09;&#xff0c;同时有n个物品…...

从0开始学习机器学习--Day26--聚类算法

无监督学习(Unsupervised learning and introduction) 监督学习问题的样本 无监督学习样本 如图&#xff0c;可以看到两者的区别在于无监督学习的样本是没有标签的&#xff0c;换言之就是无监督学习不会赋予主观上的判断&#xff0c;需要算法自己去探寻区别&#xff0c;第二张…...

Vue3插槽v-slot使用方式

在 Vue 3 中&#xff0c;v-slot 是用来定义和使用插槽的指令。插槽是 Vue 的一个功能&#xff0c;允许你在组件内部定义占位内容&#xff0c;便于在父组件中提供动态内容。以下是 v-slot 的详细使用方法&#xff1a; 1. 基础使用 <template><BaseComponent><te…...

Axure二级菜单下拉交互实例

1.使用boxlabe进行基础布局 2.设置鼠标悬浮和选中状态 3.转换为动态面板 选中所有二级菜单,进行按钮组转换 选中所有二级菜单,进行动态面板转换 4.给用户管理增加显示/隐藏事件 1)选择toggle代表上拉和下拉切换加载 2)勾选Bring to Front,并选择Push/Pull Widgets代表收缩时…...

华为VPN技术

1.启动设备 2.配置IP地址 [FW1]int g1/0/0 [FW1-GigabitEthernet1/0/0]ip add 192.168.1.254 24 [FW1-GigabitEthernet1/0/0]int g1/0/1 [FW1-GigabitEthernet1/0/1]ip add 100.1.1.1 24 [FW1-GigabitEthernet1/0/1]service-manage ping permit [FW2]int g1/0/0 [FW2-Gi…...

CommonsBeanutils与Shiro发序列化利用的学习

一、前言 前面的学习中&#xff0c;过了一遍cc1-cc7的利用链&#xff0c;在CC2的利用链中&#xff0c;学习了 java.util.PriorityQueue&#xff0c;它在Java中是一个优先队列&#xff0c;队列中每一个元素都有自己的优先级。在反序列化这个对象时&#xff0c;为了保证队列顺序…...

运维云计算SRE-第2周

1. 总结学过的权限&#xff0c;属性及ACL相关命令及选项&#xff0c;示例。 一、Linux安全模型 &#xff08;一&#xff09;资源分派 Authentication&#xff08;认证&#xff09;&#xff1a;验证用户身份&#xff0c;确保登录系统的用户是合法的。 Authorization&#xff08…...

React Native 全栈开发实战班 - 用户界面进阶之响应式设计实践

在移动应用开发中&#xff0c;响应式设计 是确保应用在不同设备、屏幕尺寸和方向下都能提供良好用户体验的关键。React Native 提供了多种工具和技巧来实现响应式设计&#xff0c;包括 Flexbox 布局、动态样式、屏幕尺寸适配等。本章节将详细介绍如何在 React Native 中进行响应…...

SlickGrid点击/双击事件

分析 SlickGrid提供了点击事件方法grid.onClick和grid.onDblClick用于捕获用户对表格列的点击&#xff0c;捕获到点击事件之后&#xff0c;修改表格数据&#xff0c;然后使用grid.updateRow方法将修改后的数据更新到表格中。 展示 代码 创建grid&#xff08;HTML&#xff09;…...

一文详细深入总结服务器选型

1. 题记&#xff1a; 服务器选型工作是项目规划检讨的一项非常重要的工作&#xff0c;本文详细深入总结服务器选型。 2. 服务器基础知识概览 2.1 服务器的定义与功能 2.1 .1 定义 服务器是一种高性能计算机&#xff0c;其设计目的是在网络中提供服务。它可以处理来自多个客…...

一、Nginx反向代理(七层代理)二、Nginx的TCP/UDP调度器(四层代理)

一、Nginx反向代理&#xff08;七层代理&#xff09; 实验要求 使用Nginx实现Web反向代理功能&#xff0c;实现如下功能&#xff1a; 后端Web服务器两台&#xff0c;可以使用httpd实现Nginx采用轮询的方式调用后端Web服务器两台Web服务器的权重要求设置为不同的值最大失败次数为…...

CSS+JQuery 实现弹力球效果,碰到屏幕边框弹回

实现弹力球效果&#xff0c;碰到屏幕边框弹回&#xff0c;效果如下 代码如下&#xff1a; <img src"../image/ball.png" alt"" class"ball"> <style>.ball {position: fixed;top: 50vh;left: 50vw;width: 15vw;height: 15vw;border…...

shell编程规范和脚本变量

什么是shell 人和计算机内核之间的中介&#xff1a; 计算机的语言是二进制&#xff0c;把人类的语言翻译成计算机能够识别的语言&#xff0c;然后让内核来处理 内核完成之后要把结果反馈给用户&#xff0c;要把计算机的翻译成人类能够识别的语言 命令解释器&#xff0c;pyc…...

jspm美容院管理系统

摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设计…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...