Uniapp中简单弹出层的使用

图示

在这里插入图片描述

思路

当派工单这个输入框获取到焦点后,弹出弹出层选择数据。

1、定义这个输入框

<view class="cu-form-group"><view class="title"><text class="text-red">*</text>派工单号: </view><input type="text" v-model="DispatchTicketNumber" @focus="xuanzepgd" class="is-required"placeholder=" 请选择派工单号" /><uni-popup ref="popup"><div><ul><li v-for="(item,index) of DispatchTicketNumberList" :key="index"  @click="selectItem(item)">{{item.DocNo }}</li></ul></div></uni-popup></view>

2、当获取到焦点时,调用接口获取数据,这里参数我自己写死了

//派工单输入框获取焦点xuanzepgd() {console.log('输入框获取到了焦点')this.$refs['popup'].open(),//调用接口获取派工单号uni.request({url: dtnApi,method: 'POST',header: {'Content-Type': 'application/json'},data: {context: {CultureName: "zh-CN",EntCode: "001",OrgCode: "MK",UserCode: "admin"},inDTO: [{Work: '焊接',Name: 'BP_11/2X6000MM_B80G23B01_HG',Bm: '焊管一车间',Mo: ''}]},			    	success: (res) => {console.log("结果集");console.log(res); //res是返回结果集const DispatchTicketNumberList = res.data.d.map(item => ({...item,selected: false, // 在这里添加一个 selected 属性,初始值为 false}));this.DispatchTicketNumberList = DispatchTicketNumberList;},fail: (res) => {uni.showToast({title: res.errMsg,icon: 'none',duration: 2000,})},})},

3、弹出框选择赋值给输入框

/弹出框赋值派工单号selectItem(item) {// 更新选中状态this.DispatchTicketNumberList = this.DispatchTicketNumberList.map(i => {i.selected = i.DocNo === item;return i;});// 将所选值赋值给文本框this.DispatchTicketNumber = item.DocNo;console.log("所选值")console.log(this.DispatchTicketNumber)// 关闭弹窗this.$refs['popup'].close();},

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

考虑微网新能源经济消纳的共享储能优化配置(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

leetcode消失的数字

题目描述 数组 nums 包含从 0 到 n 的所有整数&#xff0c;但其中缺了一个。请编写代码找出那个缺失的整数。你有办法在 O ( n ) O(n) O(n) 时间内完成吗&#xff1f; 示例 1&#xff1a; 输入&#xff1a;[3,0,1] 输出&#xff1a;2 leetcode链接&#xff1a;消失的数字 ⭕…

2023年无线蓝牙耳机排行榜,十款无线蓝牙耳机品牌推荐

蓝牙耳机作为现代生活必备的电子产品之一&#xff0c;我们在选购时的选择就显得尤为重要。随着各大科技公司对蓝牙耳机功能的不断完善&#xff0c;用户对于耳机的期望也越来越高&#xff0c;音质、性能、降噪、舒适度等方面都成为了用户选择蓝牙耳机时考虑的因素。接下来我们一…

C++ 数据结构B 树

目录 1. 常见的搜索结构 2. B树概念 3. B-树的插入分析 4. B-树的插入实现 4.1 B-树的节点设计 4.2 插入key的过程 4.4 B-树的简单验证 4.5 B-树的性能分析 4.6 B-树的删除 5. B树和B*树 5.1 B树 5.2 B*树 5.3 总结 6. B-树的应用 6.1 索引 6.2 MySQL索引简介 6…

计算机网络————运输层

文章目录 概述UDPTCP首部格式 连接管理连接建立连接释放 概述 从IP层看&#xff0c;通信双方是两个主机。 但真正进行通信的实体是在主机中的进程&#xff0c;是这个主机中的一个进程和另一个主机中的一个进程在交换数据。 所以严格的讲&#xff0c;两个主机进行通信就是两个…

关于邮件协议的理解、实验以及java mail的实现

目录 1、几种电子邮件系统组成 传统电子邮件系统 用户代理 UA (User Agent) 邮箱服务器 基于万维网的电子邮件系统 2、电子邮件协议 SMTP 连接建立 邮件传送 连接释放 局限 POP3 IMAP 补充 3、telnet实验电子邮件协议 SMTP POP3 4、java mail 参考文章 1、几…

el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果

<template><el-carousel class"image-swiper" :height"100%" :indicator-position"swiperItems.length < 1 ? none : ":arrow"swiperItems.length < 1 ? never : "><el-carousel-item v-for"(a, $i) in s…

websocket前端的连接与接收数据

什么是websocket 1, WebSocket是一种用于在客户端和服务器之间进行全双工通信的网络协议。它使得在单个TCP连接上可以进行双向通信&#xff0c;允许服务器主动地发送数据给客户端&#xff0c;同时客户端也可以向服务器发送数据。与传统的HTTP请求-响应模型不同&#xff0c;Web…

Scrapy框架--settings配置 (详解)

目录 settings配置 官网-参考配置 配置文档 Scrapy默认BASE设置 settings配置 Scrapy框架中的配置文件&#xff08;settings.py&#xff09;是用来管理爬虫行为和功能的关键部分。它是一个Python模块&#xff0c;提供了各种配置选项&#xff0c;可以自定义和控制爬虫的行为。…

【IMX6ULL驱动开发学习】12.Linux驱动之设备树

承接上一篇博客 【IMX6ULL驱动开发学习】11.驱动设计之面向对象_分层思想&#xff08;学习设备树过渡部分&#xff09; 代码获取&#xff1a;https://gitee.com/chenshao777/imx6-ull_-drivers 我后面将三个层合并了&#xff08;实际上只有前两层&#xff09;&#xff0c;合并…

[论文阅读] (31)李沐老师视频学习——4.研究的艺术·理由、论据和担保

《娜璋带你读论文》系列主要是督促自己阅读优秀论文及听取学术讲座&#xff0c;并分享给大家&#xff0c;希望您喜欢。由于作者的英文水平和学术能力不高&#xff0c;需要不断提升&#xff0c;所以还请大家批评指正&#xff0c;非常欢迎大家给我留言评论&#xff0c;学术路上期…

Element-Plus select选择器-下拉组件错位bug(有高度滚动时)

1. bug重现 由于项目不便展示&#xff0c;因此在官网复现bug https://element-plus.org/zh-CN/component/select.html#基础用法 2. 调试 源码调试时发现下拉菜单是直接放在body 元素里&#xff0c;这时候希望它不要直接放在body里&#xff0c; 查阅文档看到这两个属性&#x…