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

news2025/6/9 18:49:23

 主要代码 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];
        });
    },

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据库:基础SQL知识+SQL实验2

&#xff08;1&#xff09;基础知识&#xff1a; 1.JOIN&#xff08;连接&#xff09;&#xff1a; 连接操作用于根据指定的条件将两个或多个表中的数据行合并在一起。JOIN 可以根据不同的条件和方式执行&#xff0c;包括等值连接、不等值连接等。 &#xff08;1&#xff09…

5分钟了解接口测试

接口测试是指对系统接口进行测试的一种质量保障手段&#xff0c;主要是验证接口的功能、性能、安全性等方面是否符合预期。 在接口测试中&#xff0c;可以测试以下内容&#xff1a; 功能测试&#xff1a;验证接口的输入和输出是否符合预期&#xff0c;包括参数的正确性、返回结…

【Docker】docker部署conda并激活环境

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 文章目录 前言一、新建dockerfile文件二、使用build创建镜像1.报错&#xff1a;Your shell has not been properly configured to use conda activate.…

基于LLM+RAG的问答

每日推荐一篇专注于解决实际问题的外文&#xff0c;精准翻译并深入解读其要点&#xff0c;助力读者培养实际问题解决和代码动手的能力。 欢迎关注公众号 原文标题&#xff1a;LLMRAG based Question Answering 原文地址&#xff1a;https://teemukanstren.com/2023/12/25/llm…

【网络安全】上网行为代理服务器Network Agent配置

文章目录 About Network Agent SettingsIgnore Internal TrafficInternal Traffic to MonitorAdditional SettingsBandwidth calculation intervalLog protocol traffic periodically 推荐阅读 本文基于websense &#xff08;现在称为Forcepoint&#xff09;的Network Agent 配…

npm发布js工具包

一、创建项目 1、在github上创建一个项目&#xff0c;然后拉取至本地&#xff0c;进入项目目录2、执行 npm init 生成json文件3、创建 src/index.ts 入口文件和 src/isObject.ts 工具方法 src/index.ts export { default as isObject } from ./isObject src/isObject.ts /…

Zookeeper 分布式服务协调治理框架介绍入门

文章目录 为甚么需要Zookeeper一、Zookeeper 介绍1.1 介绍1.2 Zookeeper中的一些概念1.2.1 集群角色1.2.2 会话 session1.2.3 数据节点 Znode1.2.4 版本1.2.5 事件监听器 Watcher1.2.6 ACL 权限控制表(Access Control Lists) 二、 Zookeeper的系统模型2.1.1 ZNode节点2.1.2 ZNo…

亿可达:提升工作效能的秘诀

在竞争激烈的职场中&#xff0c;提高工作效率对于个人和团队都至关重要。而选择适合自己的工作效率软件&#xff0c;可以为我们提供更好的工作协作和任务管理体验。下面是我个人推荐的一些实用工作效率软件&#xff0c;希望能对您有所帮助。 1. Any.do&#xff1a;Any.do是一款…

AI小冰入驻淘宝 将提供虚拟人陪伴服务

AI小冰正式入驻淘宝&#xff01; 据悉&#xff0c;小冰在淘宝开出了“小冰旗舰店”、以及手淘小程序“X Eva 克隆人的平行世界”&#xff0c;为消费者提供基于KOL虚拟人带来的陪伴服务体验。用户搜索“小冰旗舰店”就可以直达店铺进行选购。 ​小冰旗舰店的首批商品包括冰花直充…

‘react-native‘ 不是内部或外部命令,也不是可运行的程序或批处理文件。

原因&#xff1a;没有下载react-native 解决下载react-native npm i -g react-native-cli

19|BabyAGI:根据气候变化自动制定鲜花存储策略

19&#xff5c;BabyAGI&#xff1a;根据气候变化自动制定鲜花存储策略 随着 ChatGPT 的崭露头角&#xff0c;我们迎来了一种新型的代理——Autonomous Agents&#xff08;自治代理或自主代理&#xff09;。这些代理的设计初衷就是能够独立地执行任务&#xff0c;并持续地追求长…

使用 Jupyter 分析 ROS 消息时间间隔抖动数据

ROS 是一个分布式机器人操作系统软件框架&#xff0c;节点之间通过松耦合的方式进行组合&#xff0c;包括使用 Topic、RPC 服务和参数服务器等方式进行通信。其中&#xff0c;Topic 是最常见的一种通信方式&#xff0c;例如一个雷达传感器节点实时采集三维点云数据&#xff0c;…

WEB 3D技术 three.js 几何体uv属性讲解与基本演示

本文 我们来说说uv 那么 它是什么呢&#xff1f; 首先 比如 我们几何体 贴一个图 那么 为什么我们图的四个边就能正好贴到几何体的边 为什么不可以图就在几何体中间呢&#xff1f; 中心为什么能对齐 它就不能偏一点吗&#xff1f; 这是第一个问题 还有我们 gltf 这种文件 其实…

服务器防护怎么做

随着网络攻击的日益猖獗&#xff0c;服务器安全已成为关注的焦点。如何有效防御各种网络威胁&#xff0c;确保数据安全与业务连续性&#xff0c;已成为一项迫切的需求。目前服务器所面临的主要威胁包括但不限于&#xff1a;DDoS攻击、SQL注入、跨站脚本攻击(XSS)、远程命令执行…

Linux_CentOS_7.9_Oracle11gr2配置数据库及监听服务自启动多方案实操之简易记录

前言: 作为运维保障,都无法准确预估硬件宕机的突发阶段,其生产数据实时在产出,那作为dba数据库服务以及相关Listener的其重要性、必要性就突显而出。这里拿虚拟机试验做个配置记录,便于大家学习参考。 实现方法一: 环境变量值::$ORACLE_HOME= /data/oracle/product/1…

利用深度学习图像识别技术实现教室人数识别

引言 在现代教育环境中&#xff0c;高效管理和监控教室成为了一个重要议题。随着人工智能技术的迅猛发展&#xff0c;特别是深度学习和图像识别领域的突破&#xff0c;我们现在可以通过智能系统来自动识别教室内的人数&#xff0c;从而实现更加智能化的教室管理。 深度学习与图…

可调恒流电子负载的工作原理

可调恒流电子负载是能够模拟真实负载的电子设备&#xff0c;它可以在电源和负载之间提供稳定的电流。这种设备在电源测试、电池充放电测试、电源老化测试等领域有着广泛的应用。 可调恒流电子负载的工作原理主要基于欧姆定律和功率守恒定律。欧姆定律指出&#xff0c;电流通过一…

聚名平台域名外部入库流程

如果您的域名是在聚名平台管理&#xff08;不管注册商是聚名还是阿里云、腾讯云等其他注册商&#xff09;&#xff0c;外部入库时请选择聚名。 在外部入库操作之前&#xff0c;请先登录聚名平台获取聚名平台的用户ID和邮箱信息。详细的账户ID和邮箱信息获取位置如下图&#xff…

八、HTML 链接

一、HTML 链接 HTML 使用超级链接与网络上的另一个文档相连。 HTML中的链接是一种用于在不同网页之间导航的元素。 链接通常用于将一个网页与另一个网页或资源&#xff08;如文档、图像、音频文件等&#xff09;相关联。 链接允许用户在浏览网页时单击文本或图像来跳转到其…

C#: Label、TextBox 鼠标停留时显示提示信息

说明&#xff1a;记录在 Label、TextBox 控件上 鼠标停留时显示提示信息的方法。 1.效果图 2.具体实现步骤 1. 在Form 窗口中先创建 Label 并取名&#xff1a;KEY_label &#xff0c;或 TextBox 取名&#xff1a;KEY_textBox 在 Form1 函数中添加初始化代码&#xff0c;如下&…