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

el-select下拉框 change事件返回该项所有数据

 主要代码 value-key

<template><div><el-selectv-model="value"value-key="label"placeholder="请选择"@change="selectChange"><el-optionv-for="item in options":key="item.label":label="item.label":value="item"></el-option></el-select></div>
</template><script>
export default {data() {return {options: [{value: "选项1",label: "黄金糕",},{value: "选项2",label: "双皮奶",},{value: "选项3",label: "蚵仔煎",},{value: "选项4",label: "龙须面",},{value: "选项5",label: "北京烤鸭",},],value: "",};},mounted() {},methods: {selectChange(item) {console.log(item);},},
};
</script><style scoped></style>

 以下暂时自行理解,需与后端对接(有时间在整理)。。。。。

1. input 远程搜索
 <el-autocompletestyle="width: 100%"v-model="form.ENTNAME":fetch-suggestions="querySearchAsync"placeholder="企业名称"@select="handleSelect"clearablevalue-key="ENTAME"></el-autocomplete>querySearchAsync(query, callBack) {if (query!== "") {this.$http.post("/system/ssoloin/getUrlataMap", {method: "getEntByword",token: getToken(),mapData: { type: "0", keyword: query},}).then((res) => {callBack(res.data.data.RESULTDATA);});}},handleSelect(item) {this.$http.post("/syem/ssolon/getUrltap", {method: "getRegistnfo",token: getToken(),mapData: { type: "0", keyWord: item.ENTNAME },}).then((res) => {this.form = res.data.data.RESTDATA[0];});},

 2. select 远程搜索

<el-selectv-model="form.ENTNAME"filterableremotereserve-keywordplaceholder="请输入企业名称":remote-method="remoteMethod":loading="loading"style="width: 100%"@change="selectChange"><el-optionv-for="(item, index) in options":key="index":label="item.ENTNAME":value="item.ENTNAME"></el-option></el-select>remoteMethod(query) {if (query !== "") {this.loading = true;this.$http.post("/syst/ssgin/getUrlaMap", {method: "getEyKeyord",token: getToken(),mapData: { type: "0", keyword: query },}).then((res) => {this.loading = false;this.options = res.data.data.RESUDTA;});} else {this.options = [];}},selectChange(value) {this.$http.post("/syem/ssogin/getUrlDaMap", {method: "getRegierInfo",token: getToken(),mapData: { type: "0", keyWord: value},}).then((res) => {this.form = res.data.data.RESULATA[0];});},

相关文章:

el-select下拉框 change事件返回该项所有数据

主要代码 value-key <template><div><el-selectv-model"value"value-key"label"placeholder"请选择"change"selectChange"><el-optionv-for"item in options":key"item.label":label"…...

MySQL基础篇(一)SQL

视频地址: 黑马程序员 MySQL数据库入门到精通&#xff0c;从mysql安装到mysql高级、mysql优化全囊括 SQL&#xff0c;全称 Structured Query Language&#xff0c;结构化查询语言。操作关系型数据库的编程语言&#xff0c;定义了一套操作关系型数据库统一 标准。 一、SQL通用语…...

多类指针式仪表自动读数系统的LabVIEW开发应用案例

多类指针式仪表自动读数系统的LabVIEW开发应用案例 工业环境中&#xff0c;多类指针式仪表的自动读数一直是一个具有挑战性的问题。本案例旨在展示如何使用LabVIEW开发一个高度智能化的多类指针式仪表自动读数系统&#xff0c;以应对复杂的工业环境。通过结合图像处理技术和深…...

攀登者2 - 华为OD统一考试

OD统一考试 分值: 200分 题解: Java / Python / C++ 题目描述 攀登者喜欢寻找各种地图,并且尝试攀登到最高的山峰。 地图表示为一维数组,数组的索引代表水平位置,数组的元素代表相对海拔高度。其中数组元素0代表地面。 例如:[0,1,2,4,3,1,0,0,1,2,3,1,2,1,0],代表如下…...

归并排序例题——逆序对的数量

做道简单一点的题巩固一下 归并排序实现步骤 将整个区间 [l, r] 划分为 [l, mid] 和 [mid1, r]。 递归排序 [l, mid] 和 [mid1, r]。 将左右两个有序序列合并为一个有序序列。 题目描述 给定一个长度为 n 的整数数列&#xff0c;请计算数列中的逆序对的数量。 逆序对的定义…...

数据库连接使用问题 - 1

原理 open-in-view 是 Spring Boot ⾃动加载 Spring Data JPA 提供的⼀个配置&#xff0c;全称为 spring.jpa.open-in-viewtrue&#xff0c;它只有 true 和 false 两个值&#xff0c;默认是 true。 这个配置为true时&#xff0c;会导致Web MVC请求处理的一开始&…...

【已解决】You have an error in your SQL syntax

报错讯息 java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘desc,target_url,sort,status,create_by,modify_by,created,last_update_time FROM…...

如何在Ubuntu安装SVN服务并结合cpolar实现公网TCP地址远程访问本地服务

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…...

windows监控进程是否还活着,查看内存使用率

windows监控进程是否还活着&#xff0c;查看内存使用率 1、导入库psutil pip install psutil2、查看进程是否活着 def is_process_running(self, process_name):# 查看程序是否还存活for process in psutil.process_iter():try:if process.name() process_name:return True…...

C#-词法结构

程序 C# 程序 (program) 由一个或多个源文件 (source file) 组成,源文件的正式名称是编译单元 (compilation unit)。源文件是有序的 Unicode 字符序列。 源文件与文件系统中的文件通常具有一对一的对应关系,但这种对应关系不是必需的。为实现可移植性的最大化,建议这些文件…...

GitHub pull request(傻瓜式入门版)

GitHub pull request Pull Request&#xff08;拉取请求&#xff09;是一种非常重要的协作机制&#xff0c;它是 Git 和 GitHub 等代码托管平台中常见的功能。在开源项目中&#xff0c;Pull Request 被广泛用于参与社区贡献&#xff0c;从而促进项目的发展。 一、fork代码 先…...

Studio 3T客户端连接Mongodb数据库服务

这里需要注意 一定要先开Studio 3T 到 创建连接时才开Mongodb服务 不然 Studio 3T 会找不到Mongodb服务 不知道这是不是 Studio 3T官方问题 期待解决吧 我们打开 Studio 3T 然后点击 Create a new connection 开始创建连接 新弹出的窗口中选择 Manually configure my connec…...

算法每日一题:赎金信 | 字符和整数

hello&#xff0c;大家好&#xff0c;我是星恒 今天给大家带来的题目是一道简单题目&#xff0c;主要帮大家复习一下字符串和字符的相关操作 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。如果可以&#…...

数字孪生在虚拟现实(VR)中的应用

数字孪生在虚拟现实&#xff08;VR&#xff09;中的应用为用户提供了更深入、沉浸式的体验&#xff0c;同时通过数字孪生技术模拟真实世界的物理实体。以下是数字孪生在VR中的一些应用&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发…...

iOS实时查看App运行日志

目录 一、设备连接 二、使用克魔助手查看日志 三、过滤我们自己App的日志 &#x1f4dd; 摘要&#xff1a; 本文介绍了如何在iOS iPhone设备上实时查看输出在console控制台的日志。通过克魔助手工具&#xff0c;我们可以连接手机并方便地筛选我们自己App的日志。 &#x1f4…...

论文阅读:通过时空生成卷积网络合成动态模式(重点论文)

原文链接 github code 介绍视频 视频序列包含丰富的动态模式&#xff0c;例如在时域中表现出平稳性的动态纹理模式&#xff0c;以及在空间或时域中表现出非平稳的动作模式。 我们证明了时空生成卷积网络可用于建模和合成动态模式。 该模型定义了视频序列上的概率分布&#xff0…...

html2canvas+jsPDF导出超长网页的PDF

项目需求:有一个网页大概60000px的高度,现在需要导出为PDF index.vue <template><div class"ctn"><div class"pdf-ctn"><div class"pdf-panel" ><div class"pdf-inside-panel" id"myList">&…...

云计算:OpenStack 分布式架构管理VXLAN网络(单控制节点与多计算节点)

目录 一、实验 1.环境 2.各节点新增网卡准备VXLAN网络 3.控制节点配置私有网络 4.计算节点1配置私有网络 5.计算节点2配置私有网络 6.重启服务 7.修改Dashboard 8.新建项目&#xff08;租户&#xff09;及用户 9.新建网络与子网 10.新建实例 11.新建路由 12.新增浮…...

MATLAB --- dlmread( )函数的用法

dlmread() 是 MATLAB 中用于读取以特定分隔符分隔的文本文件数据的函数 下面是 dlmread() 函数的用法&#xff1a; M dlmread(filename) M dlmread(filename, delimiter) M dlmread(filename, delimiter, R, C) M dlmread(filename, delimiter, range)参数说明&#xff1…...

STM32CubeMX RS485接口使用

一、基本知识 TTL&#xff08;Transistor-Transistor Logic&#xff09;&#xff1a; 电平范围&#xff1a; 逻辑1对应于2.4V–5V&#xff0c;逻辑0对应于0V–0.5V。通信特点&#xff1a; 全双工。特点&#xff1a; 常见于单片机和微控制器的IO电平&#xff0c;USB转TTL模块通常…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...