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];});},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/319385.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python爬虫篇(四):京东数据批量采集

京东数据批量采集 ●前言 一年一度的端午节又到了&#xff0c;甜咸粽子之争也拉开了帷幕&#xff0c;它价格高昂&#xff0c;它味道鲜美&#xff0c;然而&#xff0c;默默无名的它却备受广大民众喜爱&#xff01;好家伙&#xff0c;一看就是老qq看点了 &#xff0c;那咱们能做…

电锯切割狂

欢迎来到程序小院 电锯切割狂 玩法&#xff1a;把木块切成等分的碎片&#xff0c;每关都会有切割次数&#xff0c;木块数&#xff0c;切割越均匀分数越搞&#xff0c; 有简单、正常、困难、专家版&#xff0c;快去解锁不同版本进行切割吧^^。开始游戏https://www.ormcc.com/pl…

2023到2024年:前端发展趋势展望

本文探讨了2023年至2024年之间前端领域的发展趋势。我们将关注以下几个方面的变化&#xff1a;无代码/低代码开发的兴起、WebAssembly的广泛应用、跨平台技术的发展、人工智能在前端的应用以及用户体验的不断优化。 随着技术的飞速发展&#xff0c;前端开发在推动互联网与移动应…

numpy数组05-numpy的索引和切片

numpy中可以对其中的某一行&#xff08;列&#xff09;进行数据处理。 上节课我们已经取出了CSV文件中的二维数组&#xff0c;本次对这个二维数组为例&#xff0c;进行练习操作。 示例代码如下&#xff1a; import numpy as npus_file_path "US_video_data_numbers.cs…

【响应式编程-02】Lambda的语法格式和使用

一、简要描述 Lambda的语法格式Lambda的使用 二、Lambda的语法格式 (parameters) -> {statements;}(pararmeters) -> expression 1、(parameters) -> {statements;} parameters: 函数的参数列表statements: 执行语句-> : 使用指定参数去完成某个功能 public int me…

【基础篇】十一、JVM方法区

文章目录 1、方法区2、方法区的位置3、模拟方法区的溢出4、方法区的字符串常量池5、常量池案例6、String的intern方法7、静态变量的存放位置 1、方法区 方法区线程共享&#xff0c;存了以下几部分&#xff1a; 类的元信息运行时常量池字符串常量池 类的元信息&#xff0c;即…

05-SpringCloud-RabbitMQ-概述

RabbitMQ 1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&am…

FPGA高端项目:纯verilog的 10G-UDP 高速协议栈,提供7套工程源码和技术支持

目录 1、前言免责声明更新说明 2、相关方案推荐我这里已有的以太网方案本协议栈的千兆网UDP版本1G 千兆网 TCP-->服务器 方案1G 千兆网 TCP-->客户端 方案10G 万兆网 TCP-->服务器客户端 方案 3、该UDP协议栈性能4、详细设计方案设计架构框图网络调试助手GT资源使用GT…

Ubuntu软件和vmware下载

https://cn.ubuntu.com/download/desktop VMware 中国 - 交付面向企业的数字化基础 | CN

vc2017编译从github网站上下载的源码

以ZLmediakit为例 1.下载软件 cmakehttps://github.com/Kitware/CMake/releases/download/v3.20.5/cmake-3.20.5-windows-x86_64.zip Microsoft Visual Studio https://my.visualstudio.com/Downloads?qvisual%20studio%202017&wt.mc_ido~msft~vscom~older-downloads …

开源游戏引擎:创造无限可能 | 开源专题 No.56

godotengine/godot Stars: 62.6k License: MIT Godot Engine 是一个功能强大的跨平台游戏引擎&#xff0c;可用于创建 2D 和 3D 游戏。它提供了一套全面的常见工具&#xff0c;让用户可以专注于制作游戏而不必重复造轮子。该引擎支持将游戏一键导出到多个平台上&#xff0c;包…

增删改查语句实现了解不同的函数与特殊字符unionunion all区别

一、crud&#xff08;增删改查&#xff09; 1.1、查询 概念&#xff1a; 查询数据是指从数据库中根据需求&#xff0c;使用不同的查询方式来获取不同的数据&#xff0c;是使用频率最高、最重要的操作 注&#xff1a;在MySQL中&#xff0c;当执行一条SQL语句后&#xff0c;系…