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

devtools/2024/10/20 15:36:10/

动态查询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-fieldv-model="model.companyName"is-linkreadonlyname="所属企业"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-searchplaceholder="输入企业名称"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]?.textmodel.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 = truegetEnterpriseOptionApi(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 = falseoptions.value = []model.value.companyName = undefined;model.value.companyCode = undefined;}

http://www.ppmy.cn/devtools/105860.html

相关文章

如何安装DashVector向量检索服务SDK

DashVector向量检索服务提供下列编程语言的SDK供开发者选择。 Python SDK Java SDK HTTP API 更多编程语言的DashVector SDK将在稍后陆续提供。 Python SDK 说明 需要提前安装Python3.7及以上版本&#xff0c;请确保相应的Python版本 执行如下命令&#xff0c;通过pip安装…

k8s dial tcp 10.97.0.1:443: i/o timeout

问题 使用 kubeadm 部署完 k8s ,使用 projectcalico/tigera-operator 这个 chart 部署 calico ,卡在了 tigera-operator 这个 namespace 下的 pod tigera-operator-54b47459dd-n4x72,该 pod 一直重启,查看该 pod 日志发现如下报错 kubectl logs -f tigera-operator-54b4…

Vue3 + Axios双Token刷新解决方案

在现代前端开发中&#xff0c;使用 API 进行数据交互时&#xff0c;我们常常会遇到身份认证的问题。为了提高安全性&#xff0c;许多应用采用了 Token 机制&#xff0c;如 JWT&#xff08;JSON Web Token&#xff09;来管理用户的身份状态。本文将介绍如何在 Vue3 项目中使用 A…

软件设计之JDBC(1)

软件设计之JDBC(1) 此篇应在MySQL之后进行学习: 路线图推荐&#xff1a; 【Java学习路线-极速版】【Java架构师技术图谱】 尚硅谷2024最新JDBC教程 | jdbc基础到高级一套通关&#xff01; 资料可以去尚硅谷官网免费领取 学习内容&#xff1a; 前言JDBCPreparedStatement实现…

传统CV算法——基于Opencv的图像绘制

直线绘制 参数解析&#xff1a; &#xff08;图像矩阵&#xff0c;直线起始坐标&#xff0c; 直线终止坐标、颜色、线条厚度&#xff09; cv2.line()是OpenCV中用于绘制直线的函数。 参数说明&#xff1a;img&#xff1a;要绘制直线的图像矩阵。(100,30)&#xff1a;直线的起…

给面试网易游戏的技术一些建议

作者简介: 高科,先后在 IBM PlatformComputing从事网格计算,淘米网,网易从事游戏服务器开发,拥有丰富的C++,go等语言开发经验,mysql,mongo,redis等数据库,设计模式和网络库开发经验,对战棋类,回合制,moba类页游,手游有丰富的架构设计和开发经验。 (谢谢你的关注…

HMI触屏网关-VISION如何和OPC UA服务端通信

上文&#xff1a;HMI触屏网关-VISION如何与Node-red通信-CSDN博客 1. 准备工作 1.1. 创建OPC UA服务端 在与OPC UA服务端进行通信时&#xff0c;首先要确认服务端已就绪&#xff0c;本示例使用辅助软件1模拟OPC UA服务端。 1.2. 创建模拟点位 1.3. 测试通信 辅助软件2&…

什么是区块链?

前言 区块链&#xff08;Blockchain&#xff09;作为一种去中心化的数据记录技术&#xff0c;近些年在全球范围内引起了广泛关注和讨论。虽然最初作为比特币等加密货币的底层技术出现&#xff0c;区块链已逐渐被广泛应用于金融、供应链、医疗、能源、公共管理等多个领域。那么…