uniapp中如何给下拉框动态绑值

news2024/11/8 21:27:36

前言:

        在项目中我们会经常遇到新增的功能,而新增的页面中就会有输入框、下拉框、文本域、日期选择框等等。那么在uniapp是如何给下拉框中调用接口动态绑值的呢?请往下看  💨

💗 uView官网:介绍 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架uView UI,是uni-app生态最优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水https://www.uviewui.com/components/intro.html

大纲:

Picker选择器的基本语法:

 效果示例:


 案例: 

      🥜 通过调用集团和公司的查询数据接口,将集团和公司的下拉框中动态绑上值。

🐪 第一步:先将下拉框展示出来

<template>
	<view class="u-page">
		<u--form labelPosition="left" :model="form" :rules="rules" labelWidth="auto" ref="form">
			<u-form-item label="集团" prop="orgCode" borderBottom @click="groupShow = true; hideKeyboard()" required>
				<u--input v-model="form.orgCode" disabled disabledColor="#fff" suffixIcon="arrow-down"
					placeholder="请选择集团" border="none"></u--input>
			</u-form-item>
			<u-form-item label="公司" prop="Org" borderBottom @click="companyShow = true; hideKeyboard()" required>
				<u--input v-model="form.Org" disabled disabledColor="#fff" suffixIcon="arrow-down"
					placeholder="请选择公司" border="none"></u--input>
			</u-form-item>
	</view>
</template>

🐫 第二步: 将接口写入该页面,查看接口是否能调通(即:查询到数据)

<script>
	import * as api from '@/request';
	export default {
		data() {
			return {
				form: {
					visitorName: '',
					orgCode: '',
					companyId: '',
					targetOrg: '',
				},
				groupShow: false, //集团
				companyShow: false, //公司
				orgCode: '', //集团编码
				jtList: [], //集团list
				companyId: '', //公司id
				companyList: [], //公司list
				rules: {
					visitorName: [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.chinese(value);
						},
						message: "姓名必须为中文",
						trigger: ["change", "blur"],
					}],
					],
				},
			};
		},
		mounted() {
			this.groupInfo();
			this.companyInfo();
		},
		onReady() {
			//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			//集团
			groupInfo() {
				api.getGroup().then(res => {
					if (res.code == 0) {
						let arr = res.data.map(item=>{
							return {
								label:item.orgName,
								id:item.orgId
							}
						});
						this.jtList = [arr]
						console.log('集团:', this.jtList)
					}
				});
			},
			//公司
			companyInfo() {
				api.getCompany().then(res => {
					if (res.code == 0) {
						let com = res.data.map(item=>{
							return {
								label:item.orgName,
								id:item.orgId
							}
						})
						this.companyList = [com];
						console.log('公司:', this.companyList)
						
					}
				});
			},
			//将键盘收起,使输入框失去焦点
			hideKeyboard() {
				uni.hideKeyboard()
			},

		}
	};
</script>

数据已经有了,现在我们就看看怎么绑值吧 

🦙  第三步:给集团和公司的Picker下拉框绑值

<u-picker :show="groupShow" :columns="jtList" keyName="label" @confirm="groupConfim" @cancel="groupShow=false" ></u-picker>
<u-picker :show="companyShow" :columns="companyList" keyName="label" @confirm="companyConfim" @cancel="companyShow=false"></u-picker>

:show        展示下拉框

:columns   每一列的数据

:keyName  自定义需要展示的text属性键名       

@confirm  确认按钮,返回当前选择的值,同时关闭窗口

@cancel    取消按钮,关闭窗口

 🦙  第四步:给集团和公司 确认按钮返回当前选中的值

//集团确定按钮
groupConfim(e) {
	// 根据实际需求设置选中的值
	this.form.orgCode = e.value[0].label
	console.log('获取集团',this.form.orgCode)
	this.groupShow = false
},

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

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

相关文章

kettle开发-Day39-超好用AI+算力组合-算力提升器

前言&#xff1a; 上一节我们提到采用标记新旧数据的数据状态来快速整理需对比的数据&#xff0c;再选择性插入更新来保证数据的完整性。强强联合&#xff0c;保证了数据的高效和可用。 但是日常中&#xff0c;也存在部分场景&#xff0c;我们表输入是没有唯一性主键的&#xf…

计算机服务器数据库中了Devos后缀勒索病毒怎么办,记住以下步骤!

近期&#xff0c;我接到许多企业的求助&#xff0c;企业的用友财务软件遭受了Devos后缀勒索病毒的攻击&#xff0c;导致企业的用友财务账套被加密&#xff0c;许多重要的数据都无法正常读取&#xff0c;给公司的正常运营和数据安全带来了严重威胁。一旦企业被devos勒索病毒攻击…

【计算机组成原理】RV32I指令集

目录 一、RISC-V架构概述 二、RV32I指令集概述 三、RV32I指令格式 四、21条运算指令 五、8条访存指令 六、8条转移指令 七、10条其他指令 八、RV32I的寻址方式 一、RISC-V架构概述 RISC-V指令集起源&#xff1a; 全新的、具有典型RISC特征的指令集架构&#xff0c;20…

css基础知识六:谈谈你对BFC的理解?

一、是什么 我们在页面布局的时候&#xff0c;经常出现以下情况&#xff1a; 这个元素高度怎么没了&#xff1f;这两栏布局怎么没法自适应&#xff1f;这两个元素的间距怎么有点奇怪的样子&#xff1f; 归根究底是元素之间相互的影响&#xff0c;导致了意料之外的情况&#…

5个可以白嫖PPT模板的网站,不允许你们不知道

本期分享5个超好用的免费PPT模板网站&#xff0c;真的免费&#xff0c;建议收藏&#xff01; 菜鸟图库 https://www.sucai999.com/search/ppt/0_0_0_1.html?vNTYwNDUx 菜鸟图库网有非常丰富的免费素材&#xff0c;像设计类、办公类、自媒体类等素材都很丰富。PPT模板种类很多…

Linux文件基础IO的理解1

目录 一.Linux中文件的特性 二.C语言部分库文件相关函数 2.1在C语言的文件底层原理中&#xff1a; 2.打开与关闭函数 fopen&#xff1a;打开文件函数 2.1参数理解&#xff1a; fclose&#xff1a;关闭文件函数 实验案例&#xff1a; w方式&#xff1a; r方式的案例&…

华为OD机试之 阿里巴巴找黄金宝箱(V)(Java源码)

文章目录 阿里巴巴找黄金宝箱(V)题目描述输入描述输出描述示例代码 阿里巴巴找黄金宝箱(V) 题目描述 一贫如洗的樵夫阿里巴巴在去砍柴的路上&#xff0c;无意中发现了强盗集团的藏宝地&#xff0c;藏宝地有编号从0~N的箱子&#xff0c;每个箱子上面贴有一个数字。 阿里巴巴念…

【好书精读】网络是怎样连接的 之 客户端与服务器之间是如何收发数据

&#xff08; 该图由AI制作 学习AI绘图 &#xff09; 目录 将 HTTP 请求消息交给协议栈 对较大的数据进行拆分 使用 ACK 号确认网络包已收到 根据网络包平均往返时间调整 ACK 号等待时间 返回 ACK 号的等待时间&#xff08;这个等待时间叫超时时间&#xff09; 使用窗口…

GreasyFork+Github

GreasyForkGithub 好长时间没用 GreasyFork 了&#xff0c;最近在刷 Spring Boot 的各种知识点&#xff0c;其中很大时间都在学习 baeldung.com 这个站点。不知道是因为最近刷的勤了还是怎么的&#xff0c;这个网站经常会弹出一个“让我关闭广告阻拦插件”的提示框&#xff0c…

CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)

简述&#xff1a;Cesium是一种基于WebGL开源的虚拟地球技术&#xff0c;可以用于构建高性能、跨平台的三维地球应用程序&#xff0c;它支持多种数据格式和地图服务&#xff0c;可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件&#…

K 个一组翻转链表(leetcode 25)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路思路复杂度分析 5.实现示例参考文献 1.问题描述 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不…

Linux->线程互斥

目录 前言&#xff1a; 1 线程互斥 1.1 多线程并发问题 1.2 线程锁 1.3 锁的接口 2 线程安全与可重入函数 3 死锁 前言&#xff1a; 本篇文章主要讲解了线程互斥的实现方式&#xff0c;还有原理&#xff0c;并附上代码讲解。并且讲解了锁的概念&#xff0c;问题等。 1 线…

C++进阶—继承(上)简单特性

目录 1.继承的概念及定义 1.1继承的概念 1.2 继承定义 1.2.1定义格式 1.2.2继承关系和访问限定符 1.2.3继承基类成员访问方式的变化 2.基类和派生类对象赋值转换 3.继承中的作用域 4.派生类的默认成员函数 5.继承与友元 6. 继承与静态成员 1.继承的概念及定义 1.1继承…

OpenSSL生成SSL证书,受浏览器信任吗?

OpenSSL是用于传输层安全(TLS)协议的开源工具包&#xff0c;OpenSSL生成SSL证书能受到浏览器信任吗&#xff1f;OpenSSL生成SSL证书能不能用于网站HTTPS加密呢&#xff1f; OpenSSL是什么&#xff1f; OpenSSL是基于密码学的用于传输层安全(TLS)协议的开源工具包&#xff0c;可…

【U8+】取消用友U8软件登录界面记住密码功能

【需求描述】 由于用友U8结合远程软件使用&#xff0c; 并且为了简化操作&#xff0c;远程用户建立一个公用账户&#xff0c; 所有的U8用户都使用同一个远程用户登录&#xff0c; 但是各自有U8的账号&#xff0c;登录账套的时候&#xff0c;有操作员记录密码后&#xff0c;别的…

Springboot 核心注解和基本配置解读

目录 1. Springboot 入门与原理 1.1 Springboot 简介 1.1.1 什么是Springboot 1.1.2 Springboot 主要优点 1.2 Springboot 相关注解 1.2.1 元注解 1.2.1.1 Target 1.2.1.2 Retention 1.2.2 Configuration 1.2.3 Import 1.2.3.1 直接注入 1.2.3.2 实现 ImportSelector…

Python基础语法2(超详细举例)

生活就是这样&#xff0c;有的时候即便你尽了最大努力&#xff0c;但依然无法得偿所愿 但是&#xff0c;难道向上攀爬的那条路不是比站在顶峰更令人热血澎湃吗&#xff1f; 文章目录 一、转义符 二、变量的赋值规则 三、数据类型 四、操作符 1.除法 2.幂运算 3.布尔运算…

读营销策划心得

读营销策划心得篇1 过去的一年可算是我工作上另一个转折点&#xff0c;更是一个新的开始。特别是自今年6月份接手营销策划工作&#xff0c;不知不觉&#xff0c;已有半年。回忆这一年的工作经历&#xff0c;有艰辛、有成长、有收获、更有前景。这一年既包含了太多的艰辛与不易&…

Redis【入门篇】---- 初始 Redis

Redis【入门篇】---- 初始 Redis 1. 认识NoSQL1. 结构化与非结构化2. 关联与非关联3. 查询方式4. 事务5. 总结 2. 认识Redis3. 安装Redis1. 依赖库2. 上传安装包并解压3. 启动4. 默认启动5. 指定配置启动6. 开机自启动 4. Redis桌面客户端1. Redis命令行客户端2. 图形化桌面客户…

2023年最新企业网盘排名!一文掌握各大企业网盘优缺点

近年来&#xff0c;企业网盘已经成为一个越来越流行的工具&#xff0c;为企业寻求简化他们的文件协作过程。由于团队成员分散在不同的位置和设备上&#xff0c;网盘提供了一种安全有效的方式来存储、共享和协作文件&#xff0c;为企业提供了一系列的好处&#xff0c;包括&#…