远程搜索:remote-method

news2024/9/20 9:34:40

为了启用远程搜索,需要将filterable和remote设置为true,同时传入一个remote-method。remote-method为一个Function,它会在输入值发生变化时调用,参数为当前输入值。需要注意的是,如果el-option是通过v-for指令渲染出来的,此时需要为el-option添加key属性,且其值需具有唯一性,比如此例中的item.value。

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
  export default {
    data() {
      return {
        options: [],
        value: [],
        list: [],
        loading: false,
        states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"]
      }
    },
    mounted() {
      this.list = this.states.map(item => {
        return { value: `value:${item}`, label: `label:${item}` };
      });
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      }
    }
  }
</script>

二联动

点击左边,获取对应的列表,并支持模糊查询

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

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

相关文章

吐血整理nacos 作为springcloud的配置中心和注册中心

吐血整理nacos 作为配置中心和注册中心 环境版本nacos 版本 nacos启动单机模式启动配置数据库 Spring cloud 连接注册Nacos配置中心导入依赖 注册中心 环境版本 SpringBoot版本SpringCloud版本cloud Alibaba版本2.6.132021.0.52021.0.5.0 参照依据 spring-cloud-alibab 对应…

公众号赠书给您,祝您教师节快乐!

在此教师节即将来临之际&#xff0c;《人工智能怎么学》公众号恭祝各位老师们节日快乐&#xff01; 为了对各位老师表示最崇高的敬意&#xff0c;特开展教师节赠书活动。您只需要在9月15号22点前扫描下方二维码填写登记表&#xff0c;前5位登记的老师&#xff0c;每人均可获赠…

关于网卡用一会就无法使用的处理

1、背景 使用ubuntu 18操作系统&#xff0c;部署的.net 6的数采程序&#xff0c;使用嵌入式边缘计算终端&#xff0c;有一个网口&#xff0c;一个 wifi&#xff0c;一个中兴随身WIFI。数据程序通过网口与三菱Q系例PLC的转换器网口通讯&#xff0c;采集频率每60秒读一次PLC的点位…

DFS算法专题(二)——穷举vs暴搜vs深搜vs回溯vs剪枝【OF决策树】

目录 1、决策树 2、算法实战应用【leetcode】 2.1 题一&#xff1a;全排列 2.2.1 算法原理 2.2.2 算法代码 2.2 题二&#xff1a;子集 2.2.1 算法原理【策略一】 2.2.2 算法代码【策略一】 2.2.3 算法原理【策略二&#xff0c;推荐】 2.2.4 算法代码【策略二&#x…

【人工智能】Transformers之Pipeline(十六):表格问答(table-question-answering)

​​​​​​​ 目录 一、引言 二、表格问答&#xff08;table-question-answering&#xff09; 2.1 概述 2.2 基于BERT的表格问答模型—TAPAS&#xff08;TAble PArSing&#xff09; 2.3 应用场景​​​​​​​ 2.4 pipeline参数 2.4.1 pipeline对象实例化参数 2.4…

mysql 限制用户登录次数超过3次就 锁定账户在一段时间内不运行操作

这里是引用 主要实现步骤&#xff1a; 1.目测安装的mysql版本得是5.7.40往上&#xff0c;因为我的版本是5.7.14发现里面没有控制等下限制这个插件&#xff0c;插件具体的查看是在你安装目录下的lib/pugin下面 比如我的&#xff1a;C:\zz\ProgramFiles\MySQL\MySQL Server 5.7\l…

【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”

&#x1f935; 作者&#xff1a;coderYYY &#x1f9d1; 个人简介&#xff1a;前端程序媛&#xff0c;目前主攻web前端&#xff0c;后端辅助&#xff0c;其他技术知识也会偶尔分享&#x1f340;欢迎和我一起交流&#xff01;&#x1f680;&#xff08;评论和私信一般会回&#…

AI模型“减肥”风潮:量化究竟带来了什么?

量化对大模型的影响是什么 ©作者|YXFFF 来源|神州问学 引言 大模型在NLP和CV领域的广泛应用中展现了强大的能力&#xff0c;但随着模型规模的扩大&#xff0c;对计算和存储资源的需求也急剧增加&#xff0c;特别是在资源受限的设备上面临挑战。量化技术通过将模型参数和…

【Transformer】Post-Norm和Pre-Norm

文章目录 Transformer中使用的Post-Norm大模型常用的Pre-NormPre-Norm一定比Post-Norm好吗&#xff1f;二者区别总结参考资料 Pre-Norm和Post-Norm的区别&#xff0c;是面试官非常喜欢问的问题。下面我们按照时间线&#xff0c;尽可能直白地讲清楚二者的区别。 直观来讲&#x…

【MySQL】MySQL表的增删改查(进阶篇)——之约束条件

前言&#xff1a; &#x1f31f;&#x1f31f;本期讲解关于MySQL表增删查改进阶篇&#xff0c;希望能帮到屏幕前的你。 &#x1f308;上期博客在这里&#xff1a;http://t.csdnimg.cn/cF0Mf &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 目录 …

什么是监督学习(Supervised Learning)

一、监督学习概述 监督学习&#xff08;Supervised Learning&#xff09;是一种极具威力的机器学习方法&#xff0c;能够训练算法以识别数据中的模式&#xff0c;并据此进行精准的预测或分类。借助已有的标记数据&#xff0c;监督学习模型学会了从输入到输出的映射关系&#x…

导弹制导方式简介-其实跟卫星定位系统关系不大

导弹制导方式其实跟卫星定位系统关系不大&#xff0c;所以所谓关闭卫星定位系统导弹就不能打是谣言&#xff01; 导弹制导是指利用不同的方式&#xff0c;选择飞行路线&#xff0c;将具有动力飞行的弹头移动一段距离之后&#xff0c;击中预先设定的目标。导弹制导系统利用其中…

【网络】十大网络协议

文章目录 1. HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;2. HTTPS&#xff08;Secure Hypertext Transfer Protocol&#xff0c;安全超文本传输协议&#xff09;3. HTTP/34. TCP&#xff08;Transmission Control Protocol&#xff0c…

树莓派5-番外篇-GPU相关-学习记录2

树莓派5-番外篇-GPU相关 要查看你的树莓派5是否支持GPU计算&#xff0c;以及如何启用和使用它&#xff0c;你需要了解树莓派5的硬件配置和当前的驱动支持情况。以下是查看树莓派5的GPU支持情况的步骤。 树莓派5 GPU 支持概述 树莓派5 使用的是 Broadcom BCM2712 处理器&…

大数据新视界 --大数据大厂之Hive与大数据融合:构建强大数据仓库实战指南

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Ps初步使用教程

1.画面快捷键 Ctrl鼠标滚轮&#xff1a;画面左右移动 Shift鼠标滚轮&#xff1a;画面上下快速移动&#xff08;不加Shift正常速度移动&#xff09; Alt鼠标滚轮&#xff1a;画面大小缩放 2.工具快捷键 ShiftG&#xff1a;渐变、油漆桶、3D材质施放 切换 CtrlO&#xff1a…

【Unity3D】如何用MMD4Mecanim插件将pmx格式模型转换为fbx格式模型

文章目录 概要一、下载MMD4Mecanim插件并导入U3D1.1 下载链接1.2 导入过程 二、将.pmx模型转换为.fbx模型三、其他参数设置3.1 VMD参数3.2 Animations 概要 在Unity的环境下&#xff0c;想要将.pmx格式的3D模型转换为.fbx是有可以用的插件的&#xff0c;并不需要某些教程中那么…

Vue3+TypeScript二次封装axios

安装如下 npm install axios 第一步&#xff1a;创建config配置文件&#xff0c;用于存放请求后端的ip地址&#xff0c;用于后期打包后便于修改ip地址。 注&#xff1a;typescript要求参数要有类型。&#xff08;ES6 定义对象 属性 类型 修改的是属性的值&#xff09; inte…

超级干货|AI产品经理6大知识体系,【附零基础小白入门指南】

想要转行AI产品经理的宝子&#xff0c;这6大知识体系是你入门的基础 &#x1f4a5;基础知识&#xff1a;AI产品的根基 &#x1f4a5;平台和硬件支持&#xff1a;AI产品的技术基础设施 &#x1f4a5;AI核心技术&#xff1a;推动产品创新的引擎 &#x1f4a5;行业实践应用&#…

Python计算机视觉 第8章-图像内容分类

Python计算机视觉 第8章-图像内容分类 8.1 K邻近分类法&#xff08;KNN&#xff09; 在分类方法中&#xff0c;最简单且用得最多的一种方法之一就是 KNN&#xff08;K-Nearest Neighbor ,K邻近分类法&#xff09;&#xff0c;这种算法把要分类的对象&#xff08;例如一个特征…