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

news2025/1/25 9:06:13

 

 

<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]
					}
				})
			},

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

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

相关文章

Laravel框架使用phpstudy本地安装的composer用Laravel 安装器进行安装搭建

一、首先需要安装Laravel 安装器 composer global require laravel/installer 二、安装器安装好后&#xff0c;可以使用如下命令创建项目 laravel new sys 三、本地运行 php artisan serve 四、 使用Composer快速安装Laravel5.8框架 安装指定版本的最新版本&#xff08;推荐&a…

Kibana下载与安装

Kibana 是一个免费且开放的用户界面&#xff0c;能够让你对 Elasticsearch 数据进行可视化&#xff0c;并 让你在 Elastic Stack 中进行导航。 你可以进行各种操作&#xff0c;从跟踪查询负载&#xff0c;到理解请求如 何流经你的整个应用&#xff0c;都能轻松完成。 下载地址&…

vue3老项目如何引入vite

vue3老项目如何引入vite 安装 npm install vite vitejs/plugin-vue --save-dev Vite官方中文文档修改package.json文件 在 npm scripts 中使用 vite 执行文件 "scripts": {"serve": "vite","build": "vite build","pr…

uniapp使用colorUI

colorUI 微动画 | ColorUI 使用文档 1&#xff1a;把colorui里三个文件复制到自己项目中去 App.vue </script> <style> import url(colorui/icon.css); import url(colorui/main.css); import url("colorui/animation.css");-webkit-keyframes show {…

华清远见嵌入式学习——ARM——作业2

目录 作业要求&#xff1a; 现象&#xff1a; 代码&#xff1a; 思维导图&#xff1a; 模拟面试题&#xff1a; 作业要求&#xff1a; GPIO实验——3颗LED灯的流水灯实现 现象&#xff1a; 代码&#xff1a; .text .global _start _start: 设置GPIOEF时钟使能 0X50000…

opencv视频文件的读写

目录 opencv视频文件的读写 OpenCV调用电脑摄像头 opencv视频文件的读写 在OpenCV中&#xff0c;你可以使用 cv2.VideoCapture 类 来读取视频文件&#xff0c;使用 cv2.VideoWriter 类来写入视频文件。 下面是一个简单的例子&#xff0c;演示如何使用OpenCV读取视频文件、处…

显示器屏幕oled的性能、使用场景、维护

OLED显示器屏幕具有许多独特的性能和使用场景&#xff0c;以下是关于OLED显示器屏幕的性能、使用场景和维护的详细介绍&#xff1a; 一、性能 色彩鲜艳&#xff1a;OLED显示器屏幕能够呈现出更加鲜艳的色彩&#xff0c;色彩饱和度高&#xff0c;色彩还原性好&#xff0c;可以给…

css学习笔记6(盒子模型)

CSS盒子模型 五、CSS盒子模型1.CSS长度单位2.元素的显示模式3.总结各元素的显示模式4.修改元素显示模式5.盒子模型的组成6.盒子内容区&#xff08;content&#xff09;7.关于默认宽度8.盒子内边距&#xff08;padding&#xff09;9.盒子边框&#xff08;border&#xff09;10.盒…

听GPT 讲Rust源代码--src/tools(22)

File: rust/src/tools/tidy/src/lib.rs rust/src/tools/tidy/src/lib.rs是Rust编译器源代码中tidy工具的实现文件之一。tidy工具是Rust项目中的一项静态检查工具&#xff0c;用于确保代码质量和一致性。 tidy工具主要有以下几个作用&#xff1a; 格式化代码&#xff1a;tidy工具…

力扣单调栈算法专题训练

目录 1 专题说明2 训练 1 专题说明 本博客用来计算力扣上的单调栈题目、解题思路和代码。 2 训练 题目1&#xff1a;2866美丽塔II。 解题思路&#xff1a;先计算出prefix[i]&#xff0c;表示0~i满足递增情况下&#xff0c;0~i上的元素之和最大值。然后计算出suffix[i]&#…

前端微信小程序AES加密解密踩坑

项目场景&#xff1a; 今天蛮沮丧的&#xff0c;在和别人对接的时候aes加解密的时候踩了坑。今天有个同事请假了&#xff0c;所以本来他和别人对接的活&#xff0c;老大给了我&#xff0c;然后我就正式踏上了战战兢兢的对接之路。 1.一开始的时候对面先是问用的啥加密方法。这…

XUbuntu22.04之跨平台音频编辑工具(平替Audition):ocenaudio(二百零二)

加粗样式 简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#…

STM32F4 HAL流水灯Proteus仿真

源码下载&#xff1a;https://download.csdn.net/download/zlkk00/88654405

[python]python实现对jenkins 的任务触发

目录 关键词平台说明背景一、安装 python-jenkins 库二、code三、运行 Python 脚本四、注意事项 关键词 python、excel、DBC、jenkins 平台说明 项目Valuepython版本3.6 背景 用python实现对jenkins 的任务触发。 一、安装 python-jenkins 库 pip install python-jenkin…

VSCode SSH 连接提示: spawn UNKNOWN

随笔记录 目录 1. 背景介绍 2. 确认问题 : ssh -V 3. 解决问题 3.1 确认本地 ssh.exe 路径 3.2 修改vscode Remote.ssh:Path 3.2.1 设置 Reomte.ssh:Path - 方法一 3.2.2 设置 Reomte.ssh:Path - 方法二 1. 背景介绍 windows 系统vscode ssh remote CentOS7&#xff…

Pycharm报的一些Python语法错误

Pycharm报的一些Python语法错误 1、PEP8:Expected 2 blank less:found 1 意思是&#xff1a;类和上面的行要间隔两行&#xff0c;现在只有一行 解决办法&#xff1a; 间隔2行 2、Remove redundant parentheses 意思是&#xff1a;删除多余的括号 解决&#xff1a;删掉外面括…

PIC单片机项目(7)——基于PIC16F877A的智能灯光设计

1.功能设计 使用PIC16F877A单片机&#xff0c;检测环境关照&#xff0c;当光照比阈值低的时候&#xff0c;开灯。光照阈值可以通过按键进行设置&#xff0c;同时阈值可以保存在EEPROM中&#xff0c;断电不丢失。使用LCD1602进行显示&#xff0c;第一行显示测到的实时光照强度&a…

让生活更智能,P1600边缘智能网关带你进入智能家居新时代

一、什么是P1600边缘智能网关&#xff1f; 在科技日新月异的今天&#xff0c;我们的生活已经被各种智能产品所包围。而在这个智能化的浪潮中&#xff0c;P1600边缘智能网关以其独特的优势&#xff0c;成为了智能家居的重要组成部分。那么&#xff0c;什么是P1600边缘智能网关呢…

机器学习笔记 - 音频信号处理基础知识

一、音频处理基础 音频处理是指使用各种技术和算法对音频信号进行操作和修改。 它涉及对音频数据应用数字信号处理 (DSP) 方法,以增强、修改或分析声音。音频处理广泛应用于各种应用中,包括音乐制作、电信、语音识别、音频压缩等。 1、信号类型 连续信号:连续信号或连续时间…

自动化边坡监测设备是什么?

随着科技的不断进步&#xff0c;我们的生活和环境也在不断地发生变化。然而&#xff0c;自然灾害仍然是我们无法完全避免的风险。其中&#xff0c;边坡滑坡就是一种常见的自然灾害。为了保护人民的生命财产安全&#xff0c;科学家们研发出了自动化边坡监测设备。 WX-WY1 自动化…