vue依据下拉框选择其余信息

server/2024/12/14 11:39:45/

下拉框选择内容后,其余input框与该下拉框相关的内容实时回显,用@change=加方法

<el-row><el-col :span="12"><el-form-item label="选择站点" prop="resourcesId"><el-select v-model="form.resourcesId" @change="updateInput" placeholder="请选择要申请的站点"><el-option v-for="item in tableList" :key="item.id" :label="item.stationName" :value="item.id":disabled="item.status == 1"></el-option></el-select></el-form-item></el-col><el-col span="12"><el-form-item label="租金" prop="amount"><el-input v-model="form.amount" placeholder="请输入租金" /></el-form-item></el-col></el-row><el-row><el-col span="12"><el-form-item label="开始日期" prop="beginTime"><el-date-picker clearable v-model="form.beginTime" type="date" value-format="yyyy-MM-dd"placeholder="请选择租金开始日期"></el-date-picker></el-form-item></el-col>

change方法内容,tableList是数据数组

javascript">updateInput() {const selectedStationId = this.form.resourcesId;const selectedStation = this.tableList.find(item => item.id === selectedStationId);if (selectedStation && selectedStation.rent) {this.form.amount = selectedStation.amount;//租金this.form.beginTime = selectedStation.endTime;//时间// console.log(selectedStation.amount);} else {this.form.amount = '';}},


http://www.ppmy.cn/server/150082.html

相关文章

kali黑客-利用searchsploit搜索exp一键化攻击

一、帮助手册 二、搜索的参数 2.1. 区分大小写的搜索 2.2. 精确匹配 2.3. 严格搜索 2.4.仅根据特定exp和排除指定的值 三、结果的输出方式 3.1. 以JSON格式显示结果 3.2. 允许利用标题溢出到其列中 3.3. 显示利用的完整路径 3.4. 显示更多输出信息 3.5. 显示指向地址…

计算机网络:数据链路层(三)

网课资源&#xff1a; 湖科大教书匠 1、以太网交换机 本质是一个多接口的网桥&#xff0c;执行自学习 算法 习题1 1 以太网交换机的自学习是指 A. 记录帧的源MAC地址与该帧进入交换机的端口号 B. 记录帧的目的MAC地址与该帧进入交换机的端口号 C. 记录数据包的源IP地址与…

国内首本大模型中文版书籍!复旦大学《大规模语言模型·从理论到实践》全面的一本大模型图书!

看张奇教授的主页&#xff0c;感觉这教授、博导太牛了。 在大语言模型实践和理论研究的过程中&#xff0c;他与桂韬研究员、郑锐博士生以及黄萱菁教授&#xff0c;历时 8 个月共同完成了这本书《大规模语言模型从理论到实践》&#xff01; 有需要这本《大规模语言模型从理论到实…

使用IP自签名SSL证书

最近需要创建WebSocket服务器并使用SSL证书&#xff0c;由于是内网测试&#xff0c;所以需要使用指定IP的自签SSL证书。 其实笔者前面博文 使用nexus3作为Docker镜像仓库 解决nexus3登录x509: certificate has expired or is not yet valid 中有创建过相应的证书&#xff0c;这…

安卓主板_MTK联发科android主板方案

在当前智能设备的发展中&#xff0c;安卓主板的配置灵活性和性能优化显得尤为重要。安卓主板的联发科方案&#xff0c;在芯片上&#xff0c;搭载联发科MTK6761、MT8766、MT6765、MT6762、MT8768、MT8390、MTK8370以及MT8788等型号&#xff0c;均基于64位的四核或八核架构设计。…

接口自动化框架详解(Pytest+request+Allure)

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 接口自动化是指模拟程序接口层面的自动化&#xff0c;由于接口不易变更&#xff0c;维护成本更小&#xff0c;所以深受各大公司的喜爱。 接口自动化包含2个部分&a…

深度优先遍历(DFS)

深度优先遍历&#xff08;DFS&#xff09; 1. 计算布尔二叉树的值2. 求根节点到叶节点数字之和3.二叉树剪枝4.验证二叉搜索树5. 二叉搜索树中第 K 小的元素6. 二叉树的所有路径 深度优先遍历&#xff08;DFS&#xff0c;全称为Depth First Traversal&#xff09;&#xff0c;是…

【软件工程】一篇入门UML建模图(用例图、对象图、顺序图与协作图)

​ &#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;软件开发必练内功_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1…