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

 主要代码 value-key

<template>
  <div>
    <el-select
      v-model="value"
      value-key="label"
      placeholder="请选择"
      @change="selectChange"
    >
      <el-option
        v-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-autocomplete
                style="width: 100%"
                v-model="form.ENTNAME"
                :fetch-suggestions="querySearchAsync"
                placeholder="企业名称"
                @select="handleSelect"
                clearable
                value-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-select
                v-model="form.ENTNAME"
                filterable
                remote
                reserve-keyword
                placeholder="请输入企业名称"
                :remote-method="remoteMethod"
                :loading="loading"
                style="width: 100%"
                @change="selectChange"
              >
                <el-option
                  v-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];
        });
    },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序-页面开发

文章目录 微信小程序第二章2. 页面开发2.1 创建开发页面2.2 修改项目首页2.3 页面的结构和样式设计2.3.1 WXML结构设计2.3.1.1 什么是WXML2.3.1.2 WXML的常见标签2.3.1.3 WXML的特点 2.3.2 WXSS样式设计2.3.2.1 什么是WXSS 2.4 组件库的使用和自定义组件2.4.1 小程序中的组件分…

什么是简单请求?简单请求和跨域的关系

简单请求不会发生跨域 cors 预检请求&#xff0c;预检请求 Preflight Request 是用于验证是否允许非简单请求的一种 OPTIONS 请求。预检请求指示为了减少跨域请求的复杂性和延迟&#xff0c;不是说简单请求就一定不会报跨域错误。而是非简单请求跨域的概率大一些&#xff0c;所…

Calibre PEX Hspice Netlist提取步骤(数模芯片提取spice netlist流程)

在数模混合芯片中&#xff0c;通常模拟需要数字模块通过calibre工具来提取Hspice netlist用于功耗仿真。注意这里的spice netlist和做Calibre的spice netlist是不太一样的。 另外在做calibre pex时需要确保当前的design LVS已经pass。否则功耗仿真可能会不准。 Calibre LVS常…

Modbus转Profinet解决方案,轻松搭建工业通信“桥梁”

在工业自动化领域&#xff0c;Modbus和Profinet是两种常见的通信协议。由于许多现有的工业设备使用的是Modbus协议&#xff0c;而现代化的工业系统通常采用Profinet&#xff0c;所以将Modbus转换为Profinet成为了解决方案的一个重要需求。 Modbus转Profinet解决方案具体包括以下…

LeetCode994腐烂的橘子(相关话题:矩阵dfs和bfs)

题目描述 在给定的 m x n 网格 grid 中&#xff0c;每个单元格可以有以下三个值之一&#xff1a; 值 0 代表空单元格&#xff1b;值 1 代表新鲜橘子&#xff1b;值 2 代表腐烂的橘子。 每分钟&#xff0c;腐烂的橘子 周围 4 个方向上相邻 的新鲜橘子都会腐烂。 返回 直到单…

Linux下误删除后的恢复操作测试之extundelete工具使用

一、工具介绍 extundelete命令的功能可用于系统删除文件的恢复。在使用前&#xff0c;需要先将要恢复的分区卸载&#xff0c;以防数据被意外覆盖。 语法格式&#xff1a;extundelete [参数] 文件或目录名 常用参数&#xff1a; --after 只恢复指定时间后被删除的文件 --bef…

RTC模块在汽车电池管理系统中的优势

汽车行业目前正在经历一个巨大的时期&#xff0c;关键词是 “案例”。CASE是连接、自治、共享和电气的缩写。它 表明了该汽车制造商在日益数字化的世界中的战略方向。市场的 电动汽车正在快速增长&#xff0c;预计将有助于减少二氧化碳排放和对抗 全球变暖 在本文中&#…

STL——vector详解

目录 &#x1f4a1;基本概念 &#x1f4a1;存放内置数据类型 &#x1f4a1;存放自定义数据类型 &#x1f4a1;存放自定义数据类型指针 &#x1f4a1;vector容器嵌套容器 &#x1f4a1;vector构造函数 &#x1f4a1;vector赋值操作 &#x1f4a1;vector容量和大小 &…

ChatGPT学习笔记——大模型基础理论体系

1、ChatGPT的背景与意义 近期,ChatGPT表现出了非常惊艳的语言理解、生成、知识推理能力, 它可以极好的理解用户意图,真正做到多轮沟通,并且回答内容完整、重点清晰、有概括、有条理。 ChatGPT 是继数据库和搜索引擎之后的全新一代的 “知识表示和调用方式”如下表所示。 …

【动态规划】C++算法:44 通配符匹配

作者推荐 【动态规划】【字符串】扰乱字符串 本文涉及的基础知识点 动态规划 LeetCode44 通配符匹配 给你一个输入字符串 (s) 和一个字符模式 &#xff0c;请你实现一个支持 ‘?’ 和 ‘’ 匹配规则的通配符匹配&#xff1a; ‘?’ 可以匹配任何单个字符。 ’ 可以匹配…

合合TextIn团队发布 - 文档图像多模态大模型技术发展、探索与应用

合合信息TextIn&#xff08;Text Intelligence&#xff09;团队在2023年12月31日参与了中国图象图形学学会青年科学家会议 - 垂直领域大模型论坛。在会议上&#xff0c;丁凯博士分享了文档图像大模型的思考与探索&#xff0c;完整阐述了多模态大模型在文档图像领域的发展与探索…

RocketMQ单机部署完整学习笔记

文章目录 前言一、RocketMQ是什么&#xff1f;二、使用步骤1.安装MQ1.安装JDK2.安装mq3.MQ配置(核心) 2.搭建可视化dashboard1.下载源码2.修改配置3.启动 3.整合java1.生产者2.消费者3.启动生产者4.启动消费者5.dashboard添加消费组 三、总结全部的配置 前言 本文是基于4.X版本…

自创题目——吃饺子里的幸运儿

预估难度 入门 题目描述 有个饺子&#xff0c;个人&#xff0c;每人想吃个饺子&#xff0c;但是在个饺子里有1个饺子&#xff08;编号为&#xff09;的里面是1角钱&#xff0c;传说吃到这个饺子的人在一年里会很幸福。请输出吃到这个饺子的人和吃不到个饺子的人的编号。 输…

大数据时代的WEB运维高级架构师,Web系统运维工程师的实战成长之路

一、教程描述 本套WEB架构师教程&#xff0c;大小30.61G&#xff0c;共有183个文件。 二、教程目录 01-Web架构之单机时代&#xff08;共7课时&#xff09; 02-Web架构之集群时代&#xff08;共9课时&#xff09; 03-Web架构之DNS&#xff08;共6课时&#xff09; 04-Web…

如何修复卡在恢复模式的Android 手机并恢复丢失的数据

Android 系统恢复是一项内置功能&#xff0c;如果您的 Android 设备无法正常工作或触摸屏出现问题&#xff0c;该功能会很有帮助。您可以启动进入恢复模式并使用它来恢复出厂设置您的 Android 设备&#xff0c;而无需访问设置。此外&#xff0c;它还经常用于重新启动系统、从 A…

js统一公共请求处理与常用工具封装

一个完整的前端项目往往会进行一些必要的抽取公用代码进行封装&#xff0c;这里记录js常用工具及统一的公共请求的封装。 一 2017年 第一版web管理后台在用 web后台管理页面用 /*** Created by hua on 2017/8/24.*/ var requestResult{success :0,failure:1,failureMsg:2 }j…

【PTA-C语言】编程练习5 - 函数与指针

如果代码存在问题&#xff0c;麻烦大家指正 ~ ~有帮助麻烦点个赞 ~ ~ 编程练习5 - 函数与指针 6-1 求实数和的函数&#xff08;分数 10&#xff09;6-2 求解一元二次方程实根的函数&#xff08;分数 10&#xff09;6-3 求集合数据的均方差&#xff08;分数 10&#xff09;6-4 计…

来自云仓酒庄分享为什么同一种葡萄会使用不同的名称?

如果你只是刚刚走进葡萄酒世界&#xff0c;走在葡萄酒通道上可能会令人生畏&#xff0c;因为有不同的国家、地区和生产商&#xff0c;除此之外还有数千酿酒葡萄品种。更令人困惑的是&#xff0c;有些地方对同一种葡萄使用不同的名称&#xff01;一个著名的例子是西拉和它澳大利…

Yapi安装配置(CentOs)

环境要求 nodejs&#xff08;7.6) mongodb&#xff08;2.6&#xff09; git 准备工作 清除yum命令缓存 sudo yum clean all卸载低版本nodejs yum remove nodejs npm -y安装nodejs,获取资源,安装高版本nodejs curl -sL https://rpm.nodesource.com/setup_8.x | bash - #安装 s…

免费分享:中国地下水资源分布图(附下载方法)

中国地下水资源分布图是一种展示中国各地区地下水资源丰富程度的地图。它通过不同的颜色和图案来表示地下水资源的分布情况&#xff0c;帮助我们了解中国地下水资源的分布特点和规律。 数据简介 中国地下水资源分布图展示了中国各地区地下水资源的丰富程度&#xff0c;包括地…