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

news2024/9/21 3:29:11

动态查询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.coloradmin.cn/o/2103244.html

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

相关文章

springblade-JWT认证缺陷漏洞CVE-2021-44910

漏洞成因 SpringBlade前端通过webpack打包发布的&#xff0c;可以从其中找到app.js获取大量接口 然后直接访问接口&#xff1a;api/blade-log/api/list 直接搜索“请求未授权”&#xff0c;定位到认证文件&#xff1a;springblade/gateway/filter/AuthFilter.java 后面的代码…

【数据分享】2021-2024年我国主要城市逐月轨道交通客运量数据

以地铁为代表的轨道交通是大城市居民的主要交通出行方式之一&#xff0c;轨道交通的客运量数据是评估城市轨道交通系统运行效率、承载能力和服务水平的重要指标。本次我们为大家带来的是2021-2024年我国主要城市的逐月轨道交通客运量数据&#xff01;数据更新到2024年7月份。 …

网络安全之DC-2靶机渗透测试实战

一、靶机环境搭建 1.下载DC-2虚拟机镜像文件&#xff0c;解压后用VM打开。 DC-2镜像&#xff0c;若链接失效&#xff0c;关注公众号 文化仁 回复DC-2获取&#xff0c;或联系我获取https://pan.baidu.com/s/1gVVdEbiTkFUEOpewsn1iRg?pwd2t1j 2.设置DC-2虚拟机的网络适配器为…

redis之缓存淘汰策略

1.查看redis的最大占用内存 使用redis-cli命令连接redis服务端&#xff0c;输入命令&#xff1a;config get maxmemory 输出的值为0&#xff0c;0代表redis的最大占用内存等同于服务器的最大内存。 2.设置redis的最大占用内存 编辑redis的配置文件&#xff0c;并重启redis服务…

C语言基础(三十四)

Win32 API&#xff08;Application Programming Interface&#xff09;是微软Windows操作系统提供的一套底层的应用程序编程接口&#xff0c;允许开发者直接与Windows操作系统交互&#xff0c;创建和管理窗口、图形界面、系统资源等。Win32 API主要用于开发桌面应用程序&#x…

【OpenWrt(2)】编译OpenWrt 的SDK,以linksys e8450 的MT7622 CPU为例

资源 参考 https://downloads.openwrt.org/releases/ 文章目录 资源依赖下载 SDK查询 CPU 信号 解压使用 feed 编译后台运行 依赖 apt-get update apt-get install subversion build-essential libncurses5-dev zlib1g-dev gawk git ccache gettext libssl-dev xsltproc wget…

气膜体育馆空气质量保障:健康运动新选择—轻空间

随着气膜体育馆的广泛应用&#xff0c;人们对其内部空气质量的关注日益增加。许多人担心封闭的气膜结构可能会导致空气流通不畅&#xff0c;进而影响健康。然而&#xff0c;现代气膜体育馆凭借独特的建筑设计、先进的空气净化系统以及良好的通风和换气机制&#xff0c;能够有效…

传统CV算法——边缘算子与图像金字塔算法介绍

边缘算子 图像梯度算子 - Sobel Sobel算子是一种用于边缘检测的图像梯度算子&#xff0c;它通过计算图像亮度的空间梯度来突出显示图像中的边缘。Sobel算子主要识别图像中亮度变化快的区域&#xff0c;这些区域通常对应于边缘。它是通过对图像进行水平和垂直方向的差分运算来…

MyBatis错误(一)

说明&#xff1a;记录一次MyBatis错误&#xff0c;错误信息如下&#xff0c;说数字转换异常&#xff0c;显然&#xff0c;把一个字符串类型转为数字类型&#xff0c;肯定是不行的。 2024-08-29 19:44:43.198 ERROR 24216 --- [nio-9090-exec-2] o.a.c.c.C.[.[.[/].[dispatcher…

Leetcode面试经典150题-54.螺旋矩阵

解法都在代码里&#xff0c;不懂就留言或者私信 这个题可能和算法关联不大&#xff0c;coding技巧为上 class Solution {public List<Integer> spiralOrder(int[][] matrix) {/**先定义结果集 */List<Integer> ans new ArrayList<>();/**当前位置从(0,0)开…

SpringMVC使用:类型转换数据格式化数据验证

01-类型转换器 先在pom.xml里面导入依赖&#xff0c;一个是mvc框架的依赖&#xff0c;一个是junit依赖 然后在web.xml里面导入以下配置&#xff08;配置的详细说明和用法我在前面文章中有写到&#xff09; 创建此测试类的方法用于测试springmvc是具备自动类型转换功能的 user属…

AI智能分析/智慧安防EasyCVR视频汇聚平台新版本(V3.6.0)播放鉴权与播放限制时长的区别介绍

随着科技的飞速发展&#xff0c;视频技术已成为现代社会不可或缺的一部分&#xff0c;广泛应用于安防监控、娱乐传播、在线教育、电商直播等多个领域。EasyCVR视频汇聚平台作为视频技术的佼佼者&#xff0c;不断推陈出新&#xff0c;通过功能更新迭代&#xff0c;为用户提供更加…

PyTorch 卷积层详解

PyTorch 卷积层详解 卷积层&#xff08;Convolutional Layers&#xff09;是深度学习中用于提取输入数据特征的重要组件&#xff0c;特别适用于处理图像和序列数据。PyTorch 提供了多种卷积层&#xff0c;分别适用于不同维度的数据。本文将详细介绍这些卷积层&#xff0c;特别…

江协科技stm32————11-5 硬件SPI读写W25Q64

一、开启时钟&#xff0c;开启SPI和GPIO的时钟 二、初始化GPIO口&#xff0c;其中SCK和MOSI是由硬件外设控制的输出信号&#xff0c;配置为复用推挽输出 MISO是硬件外设的输入信号&#xff0c;配置为上拉输入&#xff0c;SS是软件控制的输出信号&#xff0c;配置为通用推挽输出…

【Linux网络】应用层协议HTTP(1)

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; Linux网络 &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解 应用层协议HTTP 的相关内容。 如果看到最后您觉得这篇文章写得…

Codeforces Round 971 (Div. 4) ABCD题详细题解(C++,Python)

前言: 本文为Codeforces Round 971 (Div. 4) ABCD题的题解&#xff0c;包含C,Python语言描述&#xff0c;觉得有帮助或者写的不错可以点个赞 比赛打了没一半突然unrated了就不是很想继续写了,早起写个题解&#xff0c;下午再更新后面EFG1的&#xff0c;G2有点难应该写不出来&am…

桌球棋牌计时计费管理系统软件 可以语音报价停电可以恢复上次时间状态 佳易王计时计费管理系统操作教程

一、前言 桌球棋牌计时计费管理系统软件 可以语音报价停电可以恢复上次时间状态 佳易王计时计费管理系统操作教程 1、佳易王桌球计时计费软件&#xff0c;在使用中如遇到突然停电&#xff0c;再次打开软件的时候&#xff0c;可以点击 恢复上次状态按钮&#xff0c;时间可以恢…

CRIO与Windows下LabVIEW开发对比

LabVIEW在CRIO和Windows平台上开发时&#xff0c;尽管同属于一个编程环境&#xff0c;但在硬件架构、实时性能、模块化设计等方面存在显著差异。CRIO系统通常应用于工业自动化和嵌入式控制&#xff0c;具有实时操作系统支持和强大的I/O扩展能力&#xff1b;而Windows系统则更适…

【word导出带图片】使用docxtemplater导出word,通知书形式的word

一、demo-导出的的 二、代码操作 1、页面呈现 项目要求&#xff0c;所以页面和导出来的word模版一致 2、js代码【直接展示点击导出的js代码】 使用插件【先下载这五个插件&#xff0c;然后页面引入插件】 import docxtemplater from docxtemplater import PizZip from pizzip …

生成密码c

需求 目前需要实现生成8-12位密码&#xff0c;密码要求至少包含一位数字&#xff0c;一位大写字母&#xff0c;一位小写字母&#xff0c;一位特殊字符。特殊字符仅包含&#xff08;“”&#xff0c;“&#xff01;”&#xff0c;“_”&#xff09; 需求分析 可知我们需要1个…