vant 动态查询下拉菜单(可用)

动态查询item项

在这里插入图片描述

<van-form @submit="onSubmit" ref="formRef">
    <Title title="企业信息" title-line title-size="19" class="ml-[18px] mb-[18px]"></Title>
    <van-cell-group inset class="py-[18px]">
      <div>
        <field-title title="所属企业" class="ml-4"></field-title>
        <van-field
            v-model="model.companyName"
            is-link
            readonly
            name="所属企业"
            placeholder="请选择所属企业"
            @click="showPicker = true"
            :rules="[{ required: true, message: '必填项' }]"
            @input="getCompanyList(model.companyName)"
        />
        <van-popup v-model:show="showPicker" position="bottom" :close-on-click-overlay="false">
          <div class="w-full text-center mt-4">选择企业</div>
          <van-search
              placeholder="输入企业名称"
              v-model="model.companyName"
              @search="onSearch"
              @update:model-value="getCompanyList"
          ></van-search>
          <van-picker
              :columns="options"
              @confirm="onConfirm"
              @cancel="handCancelPickerCompanyInfo"
          >
          </van-picker>
        </van-popup>
      </div>
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button  block type="primary" native-type="submit" :loading="loading" :disabled="loading">
        注册
      </van-button>
    </div>
  </van-form>
  const model = ref({
    companyName: undefined,
    companyCode: undefined,
  })

  const showPicker = ref(false);
  
  const onConfirm = ({selectedOptions}) => {
    model.value.companyName = selectedOptions[0]?.text
    model.value.companyCode = selectedOptions[0]?.value;
    showPicker.value = false;
  };
  function onSearch(value) {
    getCompanyList(value)
  }
  const options = ref<any>([])
  const loading = ref(false)
  const loadingSearch = ref(false)

  function getCompanyList(value: string) {
    if (!value.length) {
      options.value = []
      return
    }
    loadingSearch.value = true
    getEnterpriseOptionApi(value).then((res) => {
      options.value = res.rows.map(item => ({text: item.label, value: item.value}))
      loadingSearch.value = false
    }).catch((err) => {
      loadingSearch.value = false
    })
  }
 function handCancelPickerCompanyInfo() {
   showPicker.value = false
   options.value = []
   model.value.companyName = undefined;
   model.value.companyCode = undefined;
 }

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

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

相关文章

【JavaSE基础】Java 基础知识

Java 转义字符 Java 常用的转义字符 在控制台&#xff0c;输入 tab 键&#xff0c;可以实现命令补全 转义字符含义作用\t制表符一个制表位&#xff0c;实现对齐的功能\n &#xff1a;换行符\n换行符一个换行符\r回车符一个回车键 System.out.println(“韩顺平教育\r 北京”);&…

pod基础和镜像拉取策略

目录 pod概念 pod的分类 1.基础容器 pause 2.初始化容器 init 实验&#xff1a;定义初始化容器 init容器的作用 实验&#xff1a;如何在容器内部进行挂载 镜像拉取策略 pod概念 pod是k8s里面的最小单位&#xff0c;pod也是最小化运行容器的资源对象。容器是基于pod在k…

黑马点评10——用户签到-BitMap数据结构

文章目录 BitMap用法签到功能签到统计 BitMap用法 其实数据库完全可以实现签到功能 但签到数据比较大&#xff0c;借鉴签到卡的思想 布隆过滤器也是使用BitMap实现的. 签到功能 因为是当前用户的当天&#xff0c;所以保存需要的年月日不需要参数&#xff0c;可以直接获取。…

matter中的Fabric(网络结构)

什么是Fabric&#xff1f; Fabric可以被理解为一组相互信任的设备和控制器&#xff0c;它们共享一个共同的信任域。这意味着在同一个Fabric中的设备和控制器之间可以进行安全的通信&#xff0c;而无需额外的身份验证或安全检查。每个Fabric有一个唯一的标识&#xff0c;确保Fab…

Android调整第三方库PickerView宽高--回忆录

一、效果 // 时间选择implementation com.contrarywind:Android-PickerView:4.1.9 多年前&#xff0c;使用到事件选择器&#xff0c;但是PickerView默认宽度使满屏的&#xff0c;不太符合业务需求&#xff0c;当时为此花了许多时间&#xff0c;最终找到了解决方案&#xff0c;…

使用 Milvus 和 Streamlit 搭建多模态产品推荐系统

我们可以使用 Milvus 搭建多模态 RAG 应用&#xff0c;用于产品推荐系统。用户只需简单上传一张图片并输入文字描述&#xff0c;Google 的 MagicLens 多模态 Embedding 模型就会将图像和文本编码成一个多模态向量。然后&#xff0c;使用这个向量从 Milvus 向量数据库中找到最相…

JVM——Java虚拟机内存初识(面经篇之JVM内存)

网上说的太详细了,真不利于我的初识和记忆&#xff0c; 例如&#xff1a;堆区的young&#xff0c; old&#xff0c;讲了一大堆&#xff0c;结果&#xff0c;我连这些区域是干什么的都不知道&#xff0c;存储什么的都不知道&#xff0c; 害得是我自己总结&#xff1a; 堆&#x…

JavaWeb【day08】--(MySQL-Mybatis入门)

数据库开发-MySQL 1. 多表查询 1.1 概述 1.1.1 数据准备 SQL脚本&#xff1a; #建议&#xff1a;创建新的数据库 create database db04; use db04; ​ -- 部门表 create table tb_dept (id int unsigned primary key auto_increment comment 主键ID,name v…

各类AI工具编程能力测试对比

各类AI工具编程能力对比 现在各类AI工具火爆&#xff0c;擅长各类问题解决&#xff0c;闲来无事&#xff0c;验证下各类AI工具的编程能力如何。问题&#xff1a;c 实现杨辉三角&#xff0c;并main函数测试 kimi 对话窗口输入问题&#xff0c;得到了c的完整程序&#xff1a; …

通过redis-operator 来部署 Redis Cluster 集群

安装 Redis Operator 首先&#xff0c;需要安装 redis-operator。可以通过 Helm 或直接应用 YAML 文件来安装。 使用 Helm 安装&#xff1a; helm repo add ot-helm https://ot-container-kit.github.io/helm-charts/ helm install redis-operator ot-helm/redis-operator --…

B树和B+树

B树和B树是两种用于数据库和文件系统中的自平衡树数据结构&#xff0c;它们可以保持数据有序&#xff0c;同时支持快速的查找、插入和删除操作。下面是它们的基本介绍&#xff1a; B树&#xff08;B-Tree&#xff09; 定义&#xff1a;B树是一种平衡的多路搜索树&#xff0c;…

数据分析新星,DuckDB与Pandas处理大数据速度对比

大家好&#xff0c;Pandas库众所周知&#xff0c;适合数据分析新手入门&#xff0c;但在大数据面前却显得处理缓慢。相比之下&#xff0c;开源的DuckDB以其卓越的列式存储性能&#xff0c;在大数据处理上速度惊人&#xff0c;速度远超Pandas。而且&#xff0c;DuckDB配备了Pyth…

JS设计模式之“语言之魂” - 原型模式

前言 当我们学习JavaScript的时候&#xff0c;经常会听到原型&#xff08;prototype)、原型链&#xff08;prototype chain&#xff09;和原型模式&#xff08;prototype pattern&#xff09;这些概念&#xff0c;它们之间有什么关联呢&#xff1f;怎么样才能使用好原型模式呢…

基于yolov8的西红柿检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

【算法介绍】 基于YOLOv8的西红柿检测系统是一种利用深度学习技术的创新应用&#xff0c;旨在通过自动化和智能化手段提高西红柿成熟度检测的准确性和效率。该系统采用YOLOv8算法&#xff0c;该算法是深度学习领域中的先进目标检测模型&#xff0c;具备实时检测和多目标识别的…

OpenGL Texture C++ 预览Camera视频

OpenGL是一个图形API&#xff0c;并不是一个独立的平台。包含了一系列可以操作图形、图像的函数。基于Texture纹理强大的功能&#xff0c;本篇文章实现Android OpenGL Texture C 预览Camera视频流的功能。 项目github地址&#xff1a;https://github.com/wangyongyao1989/WyFFm…

第T10周:数据增强

>- **&#x1f368; 本文为[&#x1f517;365天深度学习训练营](https://mp.weixin.qq.com/s/0dvHCaOoFnW8SCp3JpzKxg) 中的学习记录博客** >- **&#x1f356; 原作者&#xff1a;[K同学啊](https://mtyjkh.blog.csdn.net/)** 在本教程中&#xff0c;你将学会如何进行数…

iOS——APP启动流程

APP启动 APP启动主要分为两个阶段&#xff1a;pre-main和main之后&#xff0c;而APP的启动优化也主要是在这两个阶段进行的。 main之后的优化&#xff1a;1. 减少不必要的任务&#xff0c;2.必要的任务延迟执行&#xff0c;例如放在控制器界面等等。 APP启动的大致过程&#…

云原生技术:‌引领数字化转型的新浪潮

云原生技术&#xff1a;‌引领数字化转型的新浪潮 在数字化转型的时代背景下&#xff0c;‌企业面临着前所未有的挑战与机遇。‌随着云计算技术的飞速发展&#xff0c;‌云原生技术作为一种新型的应用程序开发和部署方式&#xff0c;‌正逐步成为构建高可用、‌可扩展应用程序…

景联文科技:专业视频标注服务助力计算机视觉应用升级

视频标注是指对视频内容进行分析&#xff0c;并在视频中的特定对象、行为或事件上添加标签的过程。 视频标注包括&#xff1a; 1. 对象检测与跟踪 •对象检测&#xff1a;在每一帧中识别并定位特定的对象&#xff0c;如人、车、动物等。 •对象跟踪&#xff1a;跟踪这些对象…

使用html+css+layui实现动态表格组件

1、概述 需求&#xff0c;表格第一列指标可配置通过后端api传进来&#xff0c;表格显示数据以及鼠标触摸后气泡弹出层提示信息都是从后端传过来&#xff0c;实现动态表格的组件&#xff01;&#xff01;实现效果如下&#xff1a; 接口标准数据格式如下&#xff1a; {"da…