uniapp uview 页面多个select组件回显处理,默认选中

 

 

<view class="add-item column space-around" @click="selectClick(1)">
				<text class="w-s-color-3 f-28">商品分类</text>
				<view class="w-100 space-between">
					<!-- 第一个参数为你的单选数组,第二个参数为所需要id -->
					<input type="text" :value="echoInputFun(categoryList,query.category_id)" placeholder="请选择" disabled
						placeholder-class="phColor" class="one" />
					<u-icon name="arrow-right" color="#999" size="24"></u-icon>
				</view>
			</view>
			<view class="add-item column space-around" @click="selectClick(2)">
				<text class="w-s-color-3 f-28">商品等级</text>
				<view class="w-100 space-between">
					<!-- 第一个参数为你的单选数组,第二个参数为所需要id -->
					<input type="text" :value="echoInputFun(typeList,query.type)" placeholder="请选择" disabled
						placeholder-class="phColor" class="one" />
					<u-icon name="arrow-right" color="#999" size="24"></u-icon>
				</view>
			</view>

选择框 

<u-select v-model="selectShow" :default-value="defaultValue" :list="list"
			@confirm="confirmSelectClick"></u-select>

 select所需要的数据

selectShow: false,
list: [],
typeList: [{
				value: 1,
				label: "一级"
			},
			{
				value: 2,
				label: "二级"
			},
			{
				value: 3,
				label: "三级"
			}
		],
categoryList: [],
//记录第几个点开的select框
selectIndex: 1,
//选中的下标
defaultValue: [],
      selectClick(index) {
				this.selectIndex = index

				if (index == 1) {
					this.list = this.categoryList
					this.echoFun(this.query.category_id)
				} else {
					this.list = this.typeList
					this.echoFun(this.query.type)
				}
				this.selectShow = true
			},
			confirmSelectClick(e) {
				if (this.selectIndex == 1) {
					this.query.category_id = e[0].value
				} else {
					this.query.type = e[0].value
				}
			},
			// 回显到input上面
			echoInputFun(list, value) {
				if (!value) return
				let text
				list.map(item => {
					if (item.value == value) {
						text = item.label
					}
				})
				return text
			},
			// 回显到select表上面
			echoFun(value) {
				this.list.map((item, index) => {
					if (item.value == value) {
						this.defaultValue = [index]
					}
				})
			},

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

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

相关文章

黑马头条--day07--app文章搜索

目录 一.安装elasticsearch 1.拉取镜像 2.创建存放数据及配置文件的文件夹&#xff0c;启动时挂载。 4.修改文件夹权限 5.启动容器 5.1参数解释 6.安装ik分词器 6.2测试一下Ik分词器 二.添加文章索引库 1查询所有的文章信息&#xff0c;批量导入到es索引库中 2)测试 …

自我学习--关于如何设计光耦电路

本人在项目中多次设计光耦电路&#xff0c;目前电路在项目中运行比较平稳&#xff0c;所以总结一下自己的设计经验&#xff0c;与大家交流一下&#xff0c;如有错误还希望大家指出改正&#xff0c;谢谢&#xff08;V&#xff1a;Smt15921588263&#xff1b;愿与大家多交流&…

红队打靶练习:DIGITALWORLD.LOCAL: DEVELOPMENT

信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:69:c7:bf, IPv4: 192.168.12.128 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.12.1 00:50:56:c0:00:08 …

持续集成交付CICD:Jenkins使用GitLab共享库实现前端项目镜像构建

目录 一、实验 1. GitLab修改项目文件与Harbor环境确认 2.Jenkins使用GitLab共享库实现前端项目镜像构建 3.优化CI流水线封装Harbor账户密码 4.Jenkins再次使用GitLab共享库实现前端项目镜像构建 一、实验 1. GitLab修改项目文件与Harbor环境确认 &#xff08;1&#xf…

多维时序 | MATLAB实现BiTCN-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现BiTCN-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现BiTCN-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | MATLAB实现BiTCN-Multihea…

cisp和cissp区别,考证必学资料

CISP&#xff08;Certified Information Security Professional&#xff0c;认证信息安全专家&#xff09;和CISSP&#xff08;Certified Information Systems Security Professional&#xff0c;认证信息系统安全专业人员&#xff09;都是信息安全领域的重要认证&#xff0c;但…

学校教育培训课程课件报名营销学生作业习题小程序开发

学校教育培训课程课件报名营销学生作业习题小程序开发 学校教育培训课程课件报名营销学生作业习题小程序开发 以下是学校教育培训课程课件报名营销学生作业习题小程序的功能列表&#xff1a; 用户注册与登录功能&#xff1a;用户可以通过手机号或第三方账号注册和登录小程序。课…

2024年湖北建筑行业工程师职称/中级职称申报误区

2024年湖北建筑行业工程师职称/中级职称申报误区 关于职称申报误区是什么意思呢&#xff1f;当前你需要一个建筑类中级职称&#xff0c;你就在市面上随便找个JG对比价格跟周期符合就交资料等着中级职称出来。时间到了你等出来啥了&#xff0c;那就不好说。关于2024年中级职称申…

网络通信day5作业

1> 使用select完成TCP客户端程序 客户端: #include<myhead.h>#define FPORT 9999 #define FIP "192.168.125.130"#define KPORT 6666 #define KIP "192.168.125.130"int main(int argc, const char *argv[]) {//创建套接字文件描述符int cfd…

IP子网划分【专题突破】

1、IP地址基础 IPv4地址是32位&#xff0c;采用点分十进制方式表示&#xff0c;其次必须掌握二进制的转换。 IPv6地址是128位&#xff0c;采用冒号分隔的十六进制表示方法。 2、IP地址的分类 RFC1918规定的私有地址 A类地址范围&#xff1a;10.0.0.0-10.255.255.255(1个A类…

二叉树题目:输出二叉树

文章目录 题目标题和出处难度题目描述要求示例数据范围 前言解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;输出二叉树 出处&#xff1a;655. 输出二叉树 难度 6 级 题目描述 要求 给定二叉树的根结点 root \textt…

oracle定位造成卡顿的SQL语句

先查询阻塞的会话号 select event,machine,sql_id,program,blocking_session from dba_hist_active_sess_history where SAMPLE_TIME between TO_TIMESTAMP (2021-08-25 15:25:00, YYYY-MM-DD HH24:MI:SS) and TO_TIMESTAMP (2021-08-25 15:30:00, YYYY-MM-DD HH24:MI:SS) and …

PolarDB-X、OceanBase、CockroachDB、TiDB二级索引写入性能测评

为什么要做这个测试 二级索引是关系型数据库相较于NoSQL数据库的一个关键差异。二级索引必须是强一致的&#xff0c;因此索引的写入需要与主键的写入放在一个事务当中&#xff0c;事务的性能是二级索引性能的基础。 目前市面上的分布式数据库中&#xff0c;从使用体验的角度看…

PCL点云处理之点云置平(拟合平面绕中心旋转到绝对水平)(二百二十七)

PCL点云处理之点云置平(绕中心旋转到绝对水平)(二百二十七) 一、什么是点云置平二、算法流程三、算法实现一、什么是点云置平 有时候,我们处理的点云平面并非位于水平面,而是位于某个任一三维平面上,而大多数算法又只能在水平面处理,或者水平面的点云处理是相对更简单…

互操作性(Interoperability)如何影响着机器学习的发展?

互操作性&#xff08;Interoperability&#xff09;&#xff0c;也称为互用性&#xff0c;即两个系统之间有效沟通的能力&#xff0c;是机器学习未来发展中的关键因素。对于银行业、医疗和其他生活服务行业&#xff0c;我们期望那些用于信息交换的平台可以在我们需要时无缝沟通…

弧形导轨的加工方式有哪些?

弧形导轨常用于流水线的加工或是机械化工业的生产中&#xff0c;运动的导轨呈弧形&#xff0c;可以连接起来形成其它形态也可以是单一的&#xff0c;使用弧形导轨后是可以提高工作效率的&#xff0c;比传统的生产模式要更加快速&#xff0c;所以在很多工厂或生产车间都有它的身…

前端开发新趋势:Web3 与虚拟现实的技术融合

在当今互联网技术日新月异的时代&#xff0c;Web技术也在不断地发展和变革。从前端开发的角度来看&#xff0c;新技术的涌现和旧技术的迭代让前端开发者们面临着前所未有的挑战和机遇。Web3 与虚拟现实&#xff08;VR&#xff09;的技术融合&#xff0c;正是当前前端开发领域的…

Spring Boot学习随笔- 文件上传和下载(在线打卡、附件下载、MultipartFile)

学习视频&#xff1a;【编程不良人】2021年SpringBoot最新最全教程 第十二章、文件上传、下载 文件上传 文件上传是指将文件从客户端计算机传输到服务器的过程。 上传思路 前端的上传页面&#xff1a;提交方式必须为post&#xff0c;enctype属性必须为multipart/form-data开发…

springboot云HIS医院信息管理系统源码

通过云HIS平台,可以减少医院投资,无需自建机房和系统,快速实现信息化服务。系统升级及日常维护服务有云平台提供,无需配备专业IT维护人员进行系统维护。 一、his系统和云his系统的区别 His系统和云his系统是两种不同的计算平台&#xff0c;它们在技术架构上存在很大的差异。下…

进阶之路:高级Spring整合技术解析

Spring整合 1.1 Spring整合Mybatis思路分析1.1.1 环境准备步骤1:准备数据库表步骤2:创建项目导入jar包步骤3:根据表创建模型类步骤4:创建Dao接口步骤5:创建Service接口和实现类步骤6:添加jdbc.properties文件步骤7:添加Mybatis核心配置文件步骤8:编写应用程序步骤9:运行程序 1.…