当前位置: 首页 > news >正文

vue2项目 实现上边两个下拉框,下边一个输入框 输入框内显示的值为[“第一个下拉框选中值“ -- “第二个下拉框选中的值“]

效果:

思路:

采用vue中   [computed:] 派生属性的方式实现联动效果,上边两个切换时,下边的跟随变动

demo代码:

<template><div><!-- 第一个下拉框 --><select v-model="firstValue"><option v-for="option in options" :key="option" :value="option">{{ option }}</option></select><!-- 第二个下拉框 --><select v-model="secondValue"><option v-for="option in options" :key="option" :value="option">{{ option }}</option></select><!-- 输入框,显示结果 --><input type="text" :value="computedValue" readonly /></div>
</template><script>
export default {data() {return {firstValue: null,secondValue: null,options: [10, 20, 30, 40, 50], // 假设下拉框选项为数字};},computed: {computedValue() {// 计算输入框中的值,避免出现 NaN 或空值if (this.firstValue !== null && this.secondValue !== null) {return this.firstValue - this.secondValue;}return ''; // 若下拉框未选择,则返回空字符串},},
};
</script>

结合实际应用还可以升级提炼

HTML代码:

<el-form ref="form" :model="form" :rules="rules" label-width="110px"><el-form-item label="第一个下拉框" prop="attributeId"><el-select v-model="form.attributeId" clearable filterable style="width:100%" :disabled="updateStatus == 1" placeholder="请选择"><el-optionv-for="item in bizAttributesList":key="item.id":label="item.attributeName":value="item.id"/></el-select></el-form-item>   <el-form-item label="第二个下拉框" prop="relAttributeId"><el-select v-model="form.relAttributeId" clearable filterable style="width:100%" :disabled="updateStatus == 1" placeholder="请选择"><el-optionv-for="item in bizAttributesList":key="item.id":label="item.attributeName":value="item.id"/></el-select></el-form-item> <el-form-item label="输入框" prop="bizRelDesc"><el-input v-model="form.bizRelDesc" :value="computedValue" disabled/></el-form-item>
</el-form>

结合实际情况基本前两种,获取到的是id累的标志,所以需要在方法中过滤出显示的值

方法代码:

computed: {computedValue() {let attributeIdValue = ''let relAttributeIdValue = ''// 计算输入框中的值,避免出现 NaN 或空值if (this.form.attributeId && this.form.relAttributeId) {//两个都有值this.bizAttributesList.forEach(item=>{if(item.id === this.form.attributeId){attributeIdValue = item.attributeName}if(item.id === this.form.relAttributeId){relAttributeIdValue = item.attributeName}})return this.form.bizRelDesc = `${attributeIdValue}-${relAttributeIdValue}`}else if(this.form.attributeId && !this.form.relAttributeId){//第一个有值 第二个没有this.bizAttributesList.forEach(item=>{if(item.id === this.form.attributeId){attributeIdValue = item.attributeName}})return this.form.bizRelDesc = `${attributeIdValue}-`}else if(!this.form.attributeId && this.form.relAttributeId){//第二个有值 第一个没有this.bizAttributesList.forEach(item=>{if(item.id === this.form.relAttributeId){relAttributeIdValue = item.attributeName}})return this.form.bizRelDesc = `-${relAttributeIdValue}`}return ''; // 若下拉框未选择,则返回空字符串},},

相关文章:

vue2项目 实现上边两个下拉框,下边一个输入框 输入框内显示的值为[“第一个下拉框选中值“ -- “第二个下拉框选中的值“]

效果: 思路: 采用vue中 [computed:] 派生属性的方式实现联动效果,上边两个切换时,下边的跟随变动 demo代码: <template><div><!-- 第一个下拉框 --><select v-model"firstValue"><option v-for"option in options" :key&q…...

el-radio 点击报错 Element with focus: inputAncestor with aria-hidden....

一、序言 浏览器版本影响的问题&#xff08;与代码无关&#xff0c;可能是web或浏览器相关协议更新导致&#xff09;&#xff0c;不影响功能的使用. 翻译&#xff1a;元素上的Blocked aria-hidden&#xff0c;因为刚刚接收焦点的元素不能对辅助技术用户隐藏。避免在焦点元素或…...

集成平台,互联互通平台,企业大数据平台建设方案,技术方案(Word原件 )

企业集成平台建设方案及重点难点攻坚 基础支撑平台主要承担系统总体架构与各个应用子系统的交互&#xff0c;第三方系统与总体架构的交互。需要满足内部业务在该平台的基础上&#xff0c;实现平台对于子系统的可扩展性。基于以上分析对基础支撑平台&#xff0c;提出了以下要求&…...

宠物用品交易网站开发:SpringBoot技术详解

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…...

解构OpenAI swarm:利用Cursor进行框架分析与示例运行

解构OpenAI SWARM:利用Cursor进行框架分析与示例运行 1. 引言 在AI技术日新月异的今天,OpenAI再次为我们带来了惊喜。SWARM框架作为其最新研究成果,正在开创多智能体协作的新纪元。本文将带您深入探索这一框架,通过Cursor工具进行代码分析,并手把手教您安装运行SWARM。无论您…...

基于springboot的秦皇岛旅游景点管理系统 设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不…...

uniapp展示本地swf格式文件,实现交互

概览 uniapp打包的Android项目实现本地swf格式文件的展示&#xff0c;并且能够进行交互 需求分析 1、因为是打包的Android项目展示本地的swf文件&#xff0c;首先需要拿到这个本地的swf文件路径 2、如何在uniapp的vue页面中展示swf&#xff0c;因为没有直接展示swf文件的标…...

ZYNQ:流水灯实验

实验目的 PL_LED0 和 PL_LED1 连接到 ZYNQ 的 PL 端&#xff0c;PL_LED0 和 PL_LED1循环往复产生流水灯的效果&#xff0c;流水间隔时间为 0.5s。 原理图 程序设计 本次实验是需要实现两个LED的循环熄灭点亮&#xff0c;时间间隔是0.5S,对时间间隔的控制使用计数器来完成。本…...

StratoVirt中vCPU拓扑(SMP)配置与实现的深度解析

tratoVirt作为计算产业中面向云数据中心的企业级虚拟化平台&#xff0c;通过一套统一的架构支持虚拟机、容器和Serverless三种场景。它不仅在轻量低噪、软硬协同和Rust语言级安全等方面具备关键技术竞争优势&#xff0c;还预留了接口和设计来支持更多特性&#xff0c;并向着标准…...

Xml 相关注解使用

XmlRootElement XmlAccessorType(XmlAccessType.FIELD) 在 Java 中&#xff0c;XmlRootElement 和 XmlAccessorType 是用于 JAXB&#xff08;Java Architecture for XML Binding&#xff09;库的注解。它们帮助开发人员将 Java 对象映射到 XML 格式&#xff0c;反之亦然。下面对…...

本地时间与时区时间转化(以Helpdesk和BPI Challenge 2012为例)

数据集&#xff1a;Helpdesk 数据来源&#xff1a;https://data.4tu.nl/datasets/94ee26c8-78f6-4387-b32b-f028f2103a2c/1 描述问题&#xff1a;此数据三列属性皆为object&#xff0c;此为本地时间&#xff0c;只需关注时间格式的变化。 经过格式转化&#xff0c; 数据集&am…...

Golang | Leetcode Golang题解之第482题秘钥格式化

题目&#xff1a; 题解&#xff1a; func licenseKeyFormatting(s string, k int) string {ans : []byte{}for i, cnt : len(s)-1, 0; i > 0; i-- {if s[i] ! - {ans append(ans, byte(unicode.ToUpper(rune(s[i]))))cntif cnt%k 0 {ans append(ans, -)}}}if len(ans) &…...

代码随想录 -- 贪心 -- 无重叠区间

435. 无重叠区间 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;与上一题十分相似。 依然按照左边界从小到大对数组排序&#xff0c;初始化删除的区间数为0&#xff1b; 从1遍历数组&#xff1a;如果当前区间的左边界小于上一个区间的右边界&#xff0c;说明这两…...

sql server xml

参考SQL Server XML学习笔记 - 缥缈的尘埃 - 博客园...

WPF中MVVM的应用举例

WPF&#xff08;Windows Presentation Foundation&#xff09;是微软开发的用于创建用户界面的框架&#xff0c;而MVVM&#xff08;Model-View-ViewModel&#xff09;模式是一种分离前端UI逻辑与后台业务逻辑的方法。在WPF中使用MVVM模式可以提高代码的可维护性、可测试性和可扩…...

编程题 7-24 约分最简分式【PAT】

文章目录 题目输入格式输出格式输入样例输出样例 题解解题思路完整代码 编程练习题目集目录 题目 分数可以表示为分子/分母的形式。编写一个程序&#xff0c;要求用户输入一个分数&#xff0c;然后将其约分为最简分式。最简分式是指分子和分母不具有可以约分的成分了。如 6 /…...

尚硅谷大数据Flink1.17实战教程-笔记04【Flink DataStream API】

尚硅谷大数据技术-教程-学习路线-笔记汇总表【课程资料下载】视频地址&#xff1a;尚硅谷大数据Flink1.17实战教程从入门到精通_哔哩哔哩_bilibili 尚硅谷大数据Flink1.17实战教程-笔记01【Flink 概述、Flink 快速上手】尚硅谷大数据Flink1.17实战教程-笔记02【Flink 部署】尚硅…...

MySQL常见优化策略

MySQL 是一种广泛使用的开源数据库管理系统&#xff0c;性能的优化对于应用程序的效率至关重要。以下是一些常见的 MySQL 优化策略&#xff0c;帮助提高数据库性能和响应速度。&#x1f680; 1. 合理的索引设计 使用索引&#xff1a;确保在常用的查询条件&#xff08;如 WHER…...

gyp ERR stack Error: Command failed: D:\python\python.EXE -c import sys; print

文章目录 ​​1、问题描述​​ ​​2、解决方案​​ 1、问题描述 网上clone的开源项目在执行​​npm install​​的时候报错如下&#xff1a; 2、解决方案 经过多方查证&#xff0c;后来发现是python的版本太高了&#xff0c;我重新配置了个python2.7的环境变量就好了。 …...

代码随想录day6| 242.有效的字母异位词 、349. 两个数组的交集、 202. 快乐数 、 1. 两数之和

代码随想录day6| 242.有效的字母异位词 、349. 两个数组的交集、 202. 快乐数 、 1. 两数之和 242.有效的字母异位词思路步骤 349. 两个数组的交集思路步骤 202. 快乐数思路步骤 1. 两数之和思路步骤 242.有效的字母异位词 思路 使用暴力解法时间复杂度为O(n^2)这道题需要判断…...

构建企业级抓取服务:基于快马平台的openclaw生产环境部署实战

今天想和大家分享一个实战经验&#xff1a;如何用InsCode(快马)平台快速搭建企业级的openclaw分布式抓取服务。这个方案特别适合需要处理大规模数据采集的业务场景&#xff0c;比如电商价格监控、舆情分析或者竞品追踪。 分布式架构设计 生产环境最怕单点故障&#xff0c;所以我…...

Ryzen SDT调试工具:解锁AMD处理器隐藏性能的终极指南

Ryzen SDT调试工具&#xff1a;解锁AMD处理器隐藏性能的终极指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://git…...

NVIDIA Profile Inspector完全掌握:从问题诊断到性能优化的效率提升指南

NVIDIA Profile Inspector完全掌握&#xff1a;从问题诊断到性能优化的效率提升指南 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 许多玩家和创作者拥有高性能NVIDIA显卡&#xff0c;却因配置不当无法…...

别再乱选ASCII/HEX了!野火串口调试助手发送接收区配置详解(附实战案例)

串口通信调试实战&#xff1a;ASCII与HEX模式的选择艺术 调试智能家居设备时&#xff0c;你是否遇到过发送"ON"指令毫无反应&#xff0c;接收区却显示一堆乱码的尴尬&#xff1f;这往往不是设备故障&#xff0c;而是串口调试中最常见的模式选择错误。作为嵌入式开发者…...

AI辅助开发进阶:让快马智能助手帮你设计与优化专业图像处理库

今天想和大家分享一个很实用的开发经验——如何用AI辅助工具来优化和扩展专业图像处理库的开发。最近我在做一个Python图像处理工具库&#xff0c;正好用InsCode(快马)平台的AI功能做了些尝试&#xff0c;效果出乎意料的好。 先说说背景。这个工具库最初只有基础的图片缩放和滤…...

Go Context 取消信号传播机制剖析

Go Context 取消信号传播机制剖析 在并发编程中&#xff0c;如何优雅地控制协程的生命周期是一个关键问题。Go语言通过Context机制提供了一种统一的取消信号传播方式&#xff0c;使得跨协程、跨层级的任务取消变得简单高效。本文将深入剖析Context的取消信号传播机制&#xff…...

告别GDAL依赖!用Rasterio和TensorFlow 2.6搞定BigEarthNet-MM数据集划分与TFRecord转换

告别GDAL依赖&#xff01;用Rasterio和TensorFlow 2.6搞定BigEarthNet-MM数据集划分与TFRecord转换 在遥感图像处理领域&#xff0c;BigEarthNet-MM数据集因其多模态特性&#xff08;Sentinel-1 SAR和Sentinel-2 MSI数据&#xff09;成为研究热点。但许多开发者在处理该数据集时…...

AI艺术创作大赛:Shadow Sound Hunter生成作品展示

AI艺术创作大赛&#xff1a;Shadow & Sound Hunter生成作品展示 1. 引言 最近参加了一场AI艺术创作大赛&#xff0c;用Shadow & Sound Hunter模型生成了不少有意思的作品。这个模型在数字绘画、诗歌创作和音乐编曲方面都表现出色&#xff0c;让我看到了AI在艺术创作领…...

终极Übersicht小部件调试指南:10个实用工具和高效方法

终极bersicht小部件调试指南&#xff1a;10个实用工具和高效方法 【免费下载链接】uebersicht ˈyːbɐˌzɪt 项目地址: https://gitcode.com/gh_mirrors/ue/uebersicht bersicht是一款强大的macOS桌面小部件工具&#xff0c;让开发者能够在桌面上创建和运行自定义小部…...

10分钟掌握Deep-Live-Cam:从零搭建实时AI换脸系统的完整指南

10分钟掌握Deep-Live-Cam&#xff1a;从零搭建实时AI换脸系统的完整指南 【免费下载链接】Deep-Live-Cam real time face swap and one-click video deepfake with only a single image 项目地址: https://gitcode.com/GitHub_Trending/de/Deep-Live-Cam Deep-Live-Cam是…...