当前位置: 首页 > 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)这道题需要判断…...

fSpy完全上手指南:从基础到实战的零门槛教程

fSpy完全上手指南&#xff1a;从基础到实战的零门槛教程 【免费下载链接】fSpy A cross platform app for quick and easy still image camera matching 项目地址: https://gitcode.com/gh_mirrors/fs/fSpy 当你需要将一张普通的2D照片转换为精确的3D场景时&#xff0c;…...

学习框架和推理引擎有什么区别

​​​​​​学习框架和推理引擎通常分别应用在 AI 大模型的训练和推理 &#xff08;运行&#xff09;阶段。模型的核心任务是从大量数据中学习规律&#xff0c;完成特定预测或者生成任务&#xff0c;前者即“模型训练”&#xff0c;后者即“模型运行”。在模型训练时&#xff…...

intv_ai_mk11生成效果:对‘提高工作效率’需求输出结构清晰、可执行的5条建议

intv_ai_mk11生成效果&#xff1a;对"提高工作效率"需求输出结构清晰、可执行的5条建议 1. 模型介绍与使用场景 intv_ai_mk11是一个基于Llama架构的中等规模文本生成模型&#xff0c;特别适合处理通用问答、文本改写、解释说明等任务。这个模型已经完成本地部署&am…...

ThingsBoard源码本地部署实战:从环境准备到成功启动的避坑指南

1. 环境准备&#xff1a;打好地基才能盖高楼 第一次在本地部署ThingsBoard源码时&#xff0c;我像大多数开发者一样直接clone代码就往IDE里导&#xff0c;结果被各种依赖问题折腾得够呛。后来才发现&#xff0c;源码部署就像装修房子&#xff0c;水电改造&#xff08;环境配置&…...

小米智能家居无缝接入Home Assistant的3种高效方法

小米智能家居无缝接入Home Assistant的3种高效方法 【免费下载链接】ha_xiaomi_home Xiaomi Home Integration for Home Assistant 项目地址: https://gitcode.com/GitHub_Trending/ha/ha_xiaomi_home Xiaomi Home集成是小米官方为Home Assistant提供的智能家居集成组件…...

效率提升:基于快马AI生成vmware虚拟机自动化部署脚本,告别手动配置

在开发过程中&#xff0c;虚拟机环境的搭建往往是耗时又容易出错的环节。特别是当需要频繁创建不同配置的虚拟机时&#xff0c;手动操作不仅效率低下&#xff0c;还容易遗漏关键步骤。最近尝试用自动化脚本解决这个问题&#xff0c;效果出乎意料地好&#xff0c;分享下具体实现…...

聊天记录会消失?这款开源工具让数据永远属于你

聊天记录会消失&#xff1f;这款开源工具让数据永远属于你 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChatMsg …...

小型纯电动汽车轮毂电机及大角度转向系统的数字化设计【含catia、solidworks、CAD图纸、答辩PPT、说明书】

小型纯电动汽车轮毂电机与大角度转向系统的数字化设计&#xff0c;是新能源汽车领域的关键技术突破方向。轮毂电机通过将驱动装置集成于车轮内部&#xff0c;实现了动力传递路径的简化与能量利用效率的提升&#xff0c;其分布式驱动特性使车辆具备更灵活的扭矩分配能力&#xf…...

DeepSeek风格迁移降AI怎么用?从0到1完整操作教程

第一次操作的话&#xff0c;照着下面的步骤来&#xff0c;15分钟内搞定DeepSeek风格迁移降AI、降AI、降AIGC率。 工具选嘎嘎降AI&#xff08;www.aigcleaner.com&#xff09;&#xff0c;达标率99.26%&#xff0c;有退款保障&#xff0c;操作也不复杂。 准备工作 需要准备的&…...

VisionPro —— CogImageFileTool图像文件管理实战解析

1. CogImageFileTool核心功能解析 第一次接触CogImageFileTool时&#xff0c;我完全被它强大的图像管理能力震撼到了。这个工具就像工业视觉领域的"智能文件管家"&#xff0c;专门处理图像文件的读写和存储问题。想象一下&#xff0c;你每天要处理上千张生产线上的产…...